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

Ссылка скопирована
26 марта 2026 1 ответ
<div class="wrapper">   <select class="select">     <option>по умолчанию</option>     <option>дороже</option>     <option>дешевле</option>   </select> </div>

<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; }

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

Дополнительно:

:active
:has
transform

  • Ankhena, как правильно применить?
  • Torcher,
    прям так и применить
    .wrapper:has(select:active)::before {transform}
  • Ankhena, спасибо!
  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Антон С. Ответ

    Для того чтобы сделать так, чтобы стрелка у тега поворачивалась при нажатии, можно использовать JavaScript. Вам потребуется добавить обработчик события клика к элементу, содержащему стрелку, и при каждом клике изменять угол поворота стрелки.

    Приведу пример решения данной задачи на языке программирования JavaScript:

    // Находим элемент с тегом
    var tag = document.getElementById('your-tag-id');
    // Инициализируем переменную для хранения текущего угла поворота
    var angle = 0;
     
    // Добавляем обработчик события клика
    tag.addEventListener('click', function() {
      // Увеличиваем угол на 90 градусов при каждом клике
      angle += 90;
      // Применяем поворот к стрелке
      tag.style.transform = 'rotate(' + angle + 'deg)';
    });

    // Находим элемент с тегом var tag = document.getElementById('your-tag-id'); // Инициализируем переменную для хранения текущего угла поворота var angle = 0; // Добавляем обработчик события клика tag.addEventListener('click', function() { // Увеличиваем угол на 90 градусов при каждом клике angle += 90; // Применяем поворот к стрелке tag.style.transform = 'rotate(' + angle + 'deg)'; });

    В данном примере мы находим элемент с id "your-tag-id", добавляем к нему обработчик события клика, и при каждом клике увеличиваем угол поворота на 90 градусов. Таким образом, при каждом клике стрелка будет поворачиваться на 90 градусов.

    Не забудьте заменить "your-tag-id" на id вашего элемента с тегом. Кроме того, убедитесь, что у элемента с тегом прописаны стили для начальной ориентации и поворота (например, "transition: transform 0.3s" для плавного поворота).

    Это простое решение позволит вам создать интерактивную стрелку, которая будет поворачиваться при клике. Надеюсь, данное объяснение поможет вам решить вашу проблему!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно