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

Пользователь

от lori_jast , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от olen.shanahan , 7 месяцев назад

@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 для обработки событий выбора опции. Однако, настройки и стилизация могут быть улучшены в зависимости от ваших потребностей и предпочтений.

Пользователь

от kameron , 5 дней назад

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