В данной статье рассмотрим плагин
Selectric.js
В контексте свободной стилизации select средствами css
Плагин фактически клонирует и скрывает select, превращая его в выпадающее меню. Все действия производимые с копией проецируются и на оригинальный select, так что если вдруг вырубить плагин, то появится оригинальный select в нужном состоянии.
Подключение:
1. Переходим на сайт плагина: http://selectric.js.org/
2. Скачиваем архив
3. Подключаем к проекту минифицированный js (зависимость от jquery или zepto)
4. Заходим на страницу темирования, скачиваем и подключаем нужный css: http://selectric.js.org/demo.html
5. Пользуясь консолью браузера поправляем в скачанном стили под дизайн.
Плюсы:
- Поддержка клавиатуры
- Удобное API
- Широкие возможности стилизации и не перегруженный css самой темы
Минусы:
- Поддержка клавиатуры ограниченна, нельзя поставить tabindex (переписывается плагином)
- Под аскетичные требования проще стилизовать нативный select
- Как и обычный select - не поддреживает тэги внутри "option", но в плагине их можно с трудом отрендерить через API
Обновлено: 29.11.2017
Вам помогла эта статья? Оцените!