Gorik: jQuery customSelect
Описание:
Небольшой скрипт для изменения внешнего вида элемента <select/> на странице. При этом выпадающий список оставляем нативный.
Примеры
Обычный вариант
Disabled
C фиксированным текстом
C фиксированной шириной
C подсказкой
C подсказкой в otion
Подключение:
- Подключаем библиотеку jQuery 1.10.0+
- Добавляем фунцию из файла custom.select.js
- Подключаем скрипт для нужного нам элемента:
$('document').ready(function(){ customSelect('select'); });
- Прописываем кастомные стили для .select (есть в примере в css/styles.css).
* Я не особо люблю инлайнить стили скриптом, посему все стили прописаны ручками в css (выделено /*THIS CSS*/)
Параметры:
data-label - атрибут, который добавляет фиксированый текст в селект.
data-placeholder - атрибут, который добавляет placeholder в селект перед выбором значения. Значение "optionFirst" подставляет текст из первого элемента <option/> в селекте, а сам <option/> делается невидимым.
Ресурсы:
Файл JS custom.select.js
Файл CSS (только стили для .select) styles.css