Select css оформление — jquery плагин Selectric

В данной статье рассмотрим плагин 

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

Вам помогла эта статья? Оцените!
(3 оценок, среднее: 3,67 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *