Как сделать фильтры в виде switcher'а

Question

Как сделать фильтры в виде switcher'а

Рейтинг: 0Ответов: 4Опубликовано: 10.01.2023

Подскажите пожалуйста как сделать фильтры в виде 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>

css javascript html css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 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>

Answer 2

▲ 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>

Answer 3

▲ 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>

Answer 4

▲ 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>

Как сделать фильтры в виде switcher&#39;а

Ответы

Как сделать фильтры в виде switcher'а