Как сделать, чтобы стрелка у тега поворачивалась при нажатии?
<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
прям так и применить
.wrapper:has(select:active)::before {transform}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы стрелка у тега поворачивалась при нажатии, можно использовать 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)'; });
В данном примере мы находим элемент с id "your-tag-id", добавляем к нему обработчик события клика, и при каждом клике увеличиваем угол поворота на 90 градусов. Таким образом, при каждом клике стрелка будет поворачиваться на 90 градусов.
Не забудьте заменить "your-tag-id" на id вашего элемента с тегом. Кроме того, убедитесь, что у элемента с тегом прописаны стили для начальной ориентации и поворота (например, "transition: transform 0.3s" для плавного поворота).
Это простое решение позволит вам создать интерактивную стрелку, которая будет поворачиваться при клике. Надеюсь, данное объяснение поможет вам решить вашу проблему!