Здравствуйте, дорогие подписчики и читатели. Как много раз вам приходилось неудовольствоваться стандартными стилями браузера чекбоксов, радиокнопок, селектов и других html элементов? Думаю, это случалось часто. А как часто вы пытались изменить стили этих элементов? Думаю, не так часто, потому что довольно трудно поддаются стилизиции. Да и иногда просто время на них жалко тратить. Так можно сказать про какой-нибудь сайт-визитку, где эти элементы проявляются только в форме заявки обратного звонка. А вот если у Вас сложный сервис с кучей таких элементов, то придать значение их стилизации под дизайн сайта думаю будет очень и очень важно.

Вот я и решил выложить интересный плагин стилизации чекбоксов, радиокнопок, селектов, формы закачки файла и других полей. Как-что выглядит вы можете посмотреть в «Демо». Все стили работают на плагине jQuery Form Styler, состоящий из пары js-скриптов и одного css файла. Давайте разберем как подключить эти стили к вашему сайту.

Скачиваем архив

Для начала нужно скачать архив и разархивировать его

Подключаем стили и js скрипты

Чтобы подключить данную стилизацию нужно подключить css и js файлы

<link href="css/jquery.formstyler.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.formstyler.min.js"></script>

Файлы demo.css и demo.js не нужны. Они применяются для стилизации демонстрационной версии. А в готовом дизайне они вам только будут мешать.

Активируем плагин

Теперь нужно активировать плагин. Здесь мы пишем к каким элементам применять данный скрипт (в нашем случае input и select)

<script>
        (function($) {
        $(function() {
            $('input, select').styler({
                selectSearch: true
            });
        });
        })(jQuery);
    </script>

Спасибо за плагин Дмитрию. Вот ссылка на официальную страницу http://dimox.name/jquery-form-styler/. Здесь вы найдете и опции плагина и дополнительную информацию в комментариях.