@Torcher

Как сделать, чтобы стрелка у тега поворачивалась при нажатии?

<div class="wrapper">
  <select class="select">
    <option>по умолчанию</option>
    <option>дороже</option>
    <option>дешевле</option>
  </select>
</div>

.wrapper::before {
  position: absolute;
  content: "";
  top: 8px;
  right: 27px;
  width: 10px;
  height: 10px;
  background-image: url("image-path");
  background-repeat: no-repeat;
  background-size: 10px;
}

.select {
  letter-spacing: 0.8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  border: none;
  color: #7859CF;
  background-color: transparent;
  appearance: none;
  overflow: hidden;
  width: 160px;
  padding-left: 10px;
}


У меня стилизация тега select выглядит примерно так. Не понимаю, как сделать, чтобы при нажатии на сам select стрелка перевернулась на 180 градусов. До этого была реализация стрелки просто через фоновое изображение, но я так понимаю его тоже никак не получится перевернуть, чтобы не перевернуть весь текст вместе с ним. Можно ли как-то решить эту проблему без использования JS?
  • Вопрос задан
  • 120 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы