Как повернуть стрелку на 180deg в меню select при клике?

Question

Как повернуть стрелку на 180deg в меню select при клике?

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

На выпадающем списке select при клике нужно повернуть стрелку на 180 градусов

css javascript html

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

Answer 1

▲ 1Принят

У дефолтного селекта насколько мне известно такой возможности нету. Но можно собрать данную псевдострелку.

.select_wrapp {
  position: relative;
}

.decor_arrow {
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translate(0, -50%) rotate(0);
  width: 10px;
  height: 10px;
  padding-right: 2rem;
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
  background-position: center;
  transition: 0.3s ease-out;
}


select {

  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1rem;
}

select:focus+.decor_arrow {
  transform: translate(0, -50%) rotate(180deg);
}

<label class="select_wrapp">
  <select name="sel">Choose varible
    <option value="1">Select1</option>
    <option value="2">Select2</option>
  </select>
  <span class="decor_arrow"></span>
</label>

Тут есть проблема, что пока фокус на элементе <select> стрелка не вращается, но зато этот метод без навешивание JS функций отслеживания.

Как повернуть стрелку на 180deg в меню select при клике?

Ответы