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

Question

[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?

Comments

[Ankhena]

:active
:has
transform

[Torcher]

Ankhena, как правильно применить?

[Ankhena]

Torcher,
прям так и применить
.wrapper:has(select:active)::before {transform}

[Torcher]

Ankhena, спасибо!