0

Подскажите пожалуйста как сделать фильтры в виде switcher'а. Не получается оформить их в css Мой код:

<style>
  .filter-border-design {
    border-radius: 55px;
    height: 50px;
    background-color: #F6F6FA;
  }
</style>

<form class="filter-border" name="log" action="" method="" id="">
  <div class="spisok-name">
    Кого вы ищите?
  </div>
  <select class="filter-border-design" name="spisok2" size="1">
    <option value="option1">Не важно</option>
    <option value="option2">Кошка</option>
    <option value="option3">Собака</option>
  </select>
</form>

введите сюда описание изображения

2
  • Вам пренципиально что бы через <select> или просто что б можно было выбирать из возможных элементов? 10 янв в 17:31
  • Чтобы можно было выбрать из возможных элементов.
    – Diana
    10 янв в 17:43

4 ответа 4

1

Хорошим вариантом сделать это через радиокнопки, при отправке на сервер будет тоже самое что и с select'ом

.group-radio {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: 55px;
  background-color: #f6f6fa;
}

.group-radio-item span {
  cursor: pointer;
  display: block;
  padding: 15px;
}

.group-radio-item input {
  display: none;
}

.group-radio-item input:checked+span {
  background: gray;
  border-radius: 55px;
}
<form class="filter-border" name="log" action="" method="" id="">
  <div class="spisok-name">
    Кого вы ищите?
  </div>
  <div class="group-radio">
    <label class="group-radio-item">
          <input type="radio" name="spisok2" value="option1" checked />
          <span>option1</span>
        </label>
    <label class="group-radio-item">
          <input type="radio" name="spisok2" value="option2" />
          <span>option2</span>
        </label>
    <label class="group-radio-item">
          <input type="radio" name="spisok2" value="option3" />
          <span>option3</span>
        </label>
  </div>
</form>

2
  • Не особо ваш результат похож на ожидаемый :/
    – ΝNL993
    10 янв в 17:50
  • @ΝNL993, Чу это?
    – Даня
    10 янв в 17:55
0

Можно так

body {
  margin: 0;
  background-color: #777;
}

.select_box {
  display: inline-block;
  background-color: #F6F6FA;
  border-radius: 20px;
}

.select_box__label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.select_box__label:hover .select_box__name {
  color: #f00;
}

.select_box__checkbox {
  position: absolute;
  left: 50%;
  top: 10px;
  margin: 0;
  opacity: 0;
}

.select_box__name {
  padding: 10px;
  display: block;
  border: 1px solid transparent;
  border-radius: 20px;
  color: #777;
}

.select_box__checkbox:checked+.select_box__name {
  border-color: #FBE077;
  color: #000;
  background-color: #fff;
}
<p>Кого вы ищете?</p>
<div class="select_box">
  <label for="checkbox0" class="select_box__label">
    <input type="radio" class="select_box__checkbox" name="choose" value="0" id="checkbox0" checked>
    <span class="select_box__name">Не важно</span>
  </label>
  <label for="checkbox1" class="select_box__label">

    <input type="radio" class="select_box__checkbox" name="choose" value="1" id="checkbox1">
    <span class="select_box__name">Мужа</span>
  </label>
  <label for="checkbox2" class="select_box__label">

    <input type="radio" class="select_box__checkbox" name="choose" value="2" id="checkbox2">
    <span class="select_box__name"> Любовника</span>
  </label>
  <label for="checkbox3" class="select_box__label">

    <input type="radio" class="select_box__checkbox" name="choose" value="3" id="checkbox3">
    <span class="select_box__name">Секс-игрушку</span>
  </label>
</div>

0
0

Хммм, можно использовать radio. Вот так:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, 'Segoe UI';
}

body {
  background-color: rgb(217, 217, 217);
}

.hidden {
  display: none;
}

.switcher {
  background-color: rgb(246, 246, 250);
  padding: 1em 0;
  display: inline-block;
  border-radius: 50px;
  cursor: default;
}

.switcher-option {
  color: rgb(170, 170, 170);
  position: relative;
  padding: 0 1em;
  cursor: pointer;
}

.switcher-radio:checked + .switcher-option::before {
  content: '';
  display: block;
  width: 100%;
  height: 50px;
  position: absolute;
  border-radius: 50px;
  border: 1px solid rgb(255, 100, 0);
  box-shadow: 0 0 1px rgb(255, 100, 0);
  top: calc(-1em - 1px);
  left: 0;
}
<form class="filter-border" name="log" action="" method="" id="">
  <div class="spisok-name">
      Кого вы ищите?
  </div>
  <div class="switcher">
    <input type="radio" class="switcher-radio hidden" id="option1" value="option1" name="animal" checked>
    <label for="option1" class="switcher-option">Не важно</label>
    <input type="radio" class="switcher-radio hidden" id="option2" value="option2" name="animal">
    <label for="option2" class="switcher-option">Кошка</label>
    <input type="radio" class="switcher-radio hidden" id="option3" value="option3" name="animal">
    <label for="option3" class="switcher-option">Собака</label>
  </div>
</form>

0

Вариант css с анимацией

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #D9D9D9;
  padding: 2rem;
}

.switcher {
  max-width: 400px;
  position: relative;
  display: flex;
  background-color: #F6F6FA;
  border-radius: 55px;
  overflow: hidden;
}

.switcher__item {
  cursor: pointer;
  color: #AFAFB2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  position: relative;
  min-height: 50px;
}

.switcher__control {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.switcher__line {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: 100%;
  border: 2px solid #ECD26C;
  border-radius: 55px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform .3s ease;
}

.switcher__control:checked~.switcher__item {
  color: #ABABAB;
}

.switcher__control:checked~.switcher__line {
  opacity: 1;
}

#switcher1:checked~.switcher__line {
  transform: translateX(0);
}

#switcher2:checked~.switcher__line {
  transform: translateX(100%);
}

#switcher3:checked~.switcher__line {
  transform: translateX(200%);
}
<form class="form" action="#" method="post">
  <h3 class="form__title">
    Кого вы ищите?
  </h3>
  <div class="switcher">
    <input class="switcher__control" type="radio" name="switcher" id="switcher1" value="Не важно" checked>
    <input class="switcher__control" type="radio" name="switcher" id="switcher2" value="Кошка">
    <input class="switcher__control" type="radio" name="switcher" id="switcher3" value="Собака">
    <label class="switcher__item" for="switcher1">Не важно</label>
    <label class="switcher__item" for="switcher2">Кошка</label>
    <label class="switcher__item" for="switcher3">Собака</label>
    <div class="switcher__line"></div>
  </div>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.