Замена стандартных селектов в браузере

Selectimus

На текущем проекте некоторое время назад стала задача по унификации селектов во всех браузерах. Нужно было изменить их так, чтобы при одинаковом отображении они внешне оставались близкими к стандартным но при этом имели возможность гибкой настройки средствами CSS. Поискав готовые библиотеки, на тот момент ничего подходящего не нашел и решил сделать свой. Взял за отправную точку дизайн близкий к стандартному, плюс замена скроллбара, со стандартного системного на свой, также одинаковый во всех браузерах. Реализован скрипт в виде jQuery плагина. Требуемая версия jQuery – 1.5+.

Механизм работы такой:

• Стандартный селект полностью скрывается
• На его месте создается маркированный список, который заполняется элементами списка c атрибутом value, в котором хранится номер элемента option из селекта. Тем самым при клике на li, в соответствии с параметром в value, в скрытом селекте выбирается option.
• В том случае, если содержимое псевдоселекта больше, чем заданная видима область, то к списку добавляется скроллбар (так же jQuery плагин ScrollBar.js).
• Внешний вид скроллбара можно поменять в файле стилей selectimus.css, там же можно поменять изображение кнопок, для прокрутки вверх и вниз. (Опции для оформления скроллбара в разработке).

Возможности плагина:

• Максимальная приближенность к стандартному, но одинаковому во всех браузерах, селекту, по умолчанию.
• Стилизация селектов с помощью css. Параметр style (Object) передается при инициализации.
• Дополнительная настройка с помощью добавления ширины, высоты и установка количества строк развернутого списка селекта.
• Навигация с помощью клавиатуры.

Инициализация плагина:

	$([elemenet]).selectimus([style] [, options]) 

При инициализации плагина, если не переданы дополнительные параметры стилей, применяются стили по-умолчанию:

• color: ‘#000’,
• background: ‘#FFF’,
• color_up: ‘#FFF’,
• background_up: ‘#7EA0FA’,
• display: ‘inline-block’,
• ‘border-width’: ‘1px’,
• ‘border-style’: ‘solid’,
• ‘border-color’: ‘#b6b6b6’,
• ‘border-radius’: ‘5px’,
• margin: ‘3px 0’,
• position: ‘relative’,
• overflow: ‘visible’

Исходники находятся здесь.
Демо-страница с описанием здесь.

Плагин scrollbarJS

Заменяет стандартную полосу прокрутки в элементах на странице, к которым применяется свойство overflow: hidden, на универсальную во всех браузерах. Сейчас работает только с вертикальным контентом. В разработке также возможность добавления опций по настройке внешнего вида полосы прокрутки.

Исходники находятся здесь.

Возможно кому-нибудь пригодится такая реализация.