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

Question

Вадим

css , html

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

Как можно изменить стилизацию элемента <b>select</b> так, чтобы стрелка поворачивалась на 180 градусов при нажатии на сам элемент? Предыдущая реализация использовала фоновое изображение для создания стрелки, но невозможно перевернуть его без влияния на содержимое текста. Есть ли способы решить эту проблему без использования JavaScript?

29 февраля 2024 г. 17:38

Ответы на вопрос 1

Похожие вопросы

Answer 1

Да, можно изменить эту стилизацию с использованием CSS. Вот пример:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Arrow Rotate</title>
<style>
.select-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

.select-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  transition: transform 0.3s;
  transform-origin: 50% 50%;
}

.select-wrapper.open::before {
  transform: rotate(180deg);
}
</style>
</head>
<body>

<div class="select-wrapper">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<script>
document.querySelector('.select-wrapper').addEventListener('click', function() {
  this.classList.toggle('open');
});
</script>

</body>
</html>
```

С помощью этого CSS и небольшого JavaScript вы можете изменить стилизацию элемента <b>select</b> так, чтобы стрелка поворачивалась на 180 градусов при нажатии на сам элемент.