Как стилизовать select на javascript и css ?

@lori_jast 

Стилизация элемента <select> может быть достигнута с помощью CSS и JavaScript.

1. CSS: Назначьте класс или идентификатор элементу . Используйте стили CSS, чтобы изменить внешний вид элемента

1
2
3
4
5
6
7
8
9

.my-select {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 16px;
  padding: 6px;
  width: 200px;
  height: 30px;
}

1. JavaScript: Используйте JavaScript для кастомизации элемента

1
2
3
4
5

<select class="my-select" onchange="myFunction(event)">
  <option value="1">Опция 1</option>
  <option value="2">Опция 2</option>
  <option value="3">Опция 3</option>
</select>

1
2
3
4

function myFunction(event) {
  var value = event.target.value;
  console.log("Выбрано значение: " + value);
}

В приведенных примерах мы использовали CSS для стилизации элемента <select> и JavaScript для обработки событий выбора опции. Однако, настройки и стилизация могут быть улучшены в зависимости от ваших потребностей и предпочтений.

@lori_jast 

Дополнительно к примеру, который Вы указали, можно также использовать библиотеки, которые позволяют стилизовать элемент более красиво и интерактивно, такие как Select2 или Chosen. Эти библиотеки позволяют добавлять возможность поиска, фильтрации и другие удобные функции к стандартному элементу . У них есть свои CSS и JS файлы, которые обеспечивают необходимую функциональность и внешний вид.

Пример использования библиотеки Select2:

1. Подключение CSS и JS файлов библиотеки:

1
2

<link href="path/to/select2.min.css" rel="stylesheet">
<script src="path/to/select2.min.js"></script>

1. Инициализация элемента с помощью Select2:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<select class="my-select" id="mySelect">
  <option value="1">Опция 1</option>
  <option value="2">Опция 2</option>
  <option value="3">Опция 3</option>
</select>

<script>
$(document).ready(function() {
  $('#mySelect').select2();
});
</script>

Это позволит стилизовать элемент с помощью библиотеки Select2 и добавить полезные функции, такие как поиск и фильтрация опций.

Пожалуйста, обратите внимание, что для использования библиотеки Select2 или Chosen также потребуется подключить библиотеку jQuery.