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