Стилизуем элементы форм с jQuery Form Styler

В продолжение темы стилизации нестилизуемого решил написать статью про элементы форм, а именно: чекбоксы, селекты, поля добавления файлов и выпадающие меню. Для таких целей я использую плагин jQuery Form Styler. В этом скрипте мне понравилась простота и удобство функционала и малые размеры скрипта (Всего 10 Kb в сжатом виде, и 21 Kb в несжатом).

Что нужно?

Для работы скрипта необходима библиотека jQuery не ниже версии 1.7.0, а так же загрузить на сайт 1 из 2 скриптов на выбор:Затем подключить его в <head>
Код
<script src="http://адрес_сайта/jquery.formstyler.min.js"></script>
Затем вставляем стили:
Код
/* Чекбоксы */
.jq-checkbox{position:relative;width:13px;height:13px;border:1px solid #C3C3C3;border-radius:3px;background:#F6F6F6 url(data:image/gif;base64,R0lGODlhAQAMALMAAPHx8f7+/vv7+/j4+PX19fLy8vz8/Pn5+fb29vPz8/39/ff39wAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABAAwAAAQJMCgjzliIpAIiADs=) repeat-x;box-shadow:0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF;vertical-align:middle;cursor:pointer}
.jq-checkbox.checked span{display:block;width:9px;height:9px;border-radius:2px;background:#666;box-shadow:inset 0 -3px 6px #AAA;margin:2px 0 0 2px}
/* Радио-кнопки */
.jq-radio{width:12px;height:12px;border:1px solid #C3C3C3;border-radius:50%;background:#F6F6F6 url(data:image/gif;base64,R0lGODlhAQAMALMAAPHx8f7+/vv7+/j4+PX19fLy8vz8/Pn5+fb29vPz8/39/ff39wAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABAAwAAAQJMCgjzliIpAIiADs=) 0 -1px repeat-x;box-shadow:0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF;vertical-align:middle;cursor:pointer}
.jq-radio.checked span{display:block;width:6px;height:6px;overflow:hidden;border-radius:50%;background:#666;margin:3px 0 0 3px}
/* Поля для загрузки файлов */
.jq-file{border:1px solid #CCC;border-bottom-color:#B3B3B3;border-radius:4px;box-shadow:inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);background:#FFF}
.jq-file input{cursor:pointer;height:auto;line-height:1em}
.jq-file__name{width:170px;border:none;background:none;color:#333;font:14px Arial, Tahoma, sans-serif;padding:7px 10px 6px}
.jq-file__browse{border-left:1px solid #CCC;border-radius:0 4px 4px 0;background:#F1F1F1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;box-shadow:inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);color:#333;text-shadow:1px 1px #FFF;font:14px/30px Arial, Tahoma, sans-serif;padding:0 10px}
/* Селекты */
.jq-selectbox{vertical-align:middle;cursor:pointer}
.jq-selectbox__select{width:185px;height:30px;border:1px solid #CCC;border-bottom-color:#B3B3B3;border-radius:4px;background:#F5F5F5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;box-shadow:inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);color:#333;text-shadow:1px 1px #FFF;font:14px/30px Arial, Tahoma, sans-serif;padding:0 45px 0 10px}
.jq-selectbox__select-text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jq-selectbox__trigger{position:absolute;top:0;right:0;width:34px;height:100%;border-left:1px solid #CCC}
.jq-selectbox__trigger-arrow{position:absolute;top:14px;right:12px;width:0;height:0;overflow:hidden;border-top:5px solid #000;border-right:5px solid transparent;border-left:5px solid transparent;opacity:0.3;filter:alpha(opacity=30)}
.jq-selectbox:hover .jq-selectbox__trigger-arrow{opacity:1;filter:alpha(opacity=100)}
.jq-selectbox.disabled .jq-selectbox__trigger-arrow{opacity:0.3;filter:alpha(opacity=30)}
.jq-selectbox__dropdown{top:33px;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #C6CBD0;border-radius:4px;background:#FFF;box-shadow:0 2px 10px rgba(0,0,0,0.2);font:14px/18px Arial, Tahoma, sans-serif;margin:0;padding:0}
.jq-selectbox li{color:#231F20;padding:5px 10px 6px}
.jq-selectbox li.selected{background:#A3ABB1;color:#FFF}
.jq-selectbox li.disabled:hover{background:none}
.jq-selectbox li.optgroup:hover{background:none;color:#231F20;cursor:default}
/* Селекты (Множественные) */
.jq-select-multiple{border:1px solid #CCC;border-bottom-color:#B3B3B3;border-radius:4px;box-shadow:inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);background:#FFF;color:#333;font:14px/18px Arial, Tahoma, sans-serif;cursor:default;padding:1px}
.jq-select-multiple li{list-style:none;padding:3px 9px 4px}
.jq-select-multiple li:first-child{border-radius:3px 3px 0 0}
.jq-select-multiple li:last-child{border-radius:0 0 3px 3px}
.jq-select-multiple.disabled li.selected,.jq-select-multiple li.selected.disabled{background:#CCC;color:#FFF}
/* Текстовые поля и кнопки в качестве бонуса (Работает независимо от скрипта) */
input[type=email].styler,input[type=number].styler,input[type=password].styler,input[type=search].styler,input[type=tel].styler,input[type=text].styler,input[type=url].styler,textarea.styler{border:1px solid #CCC;border-bottom-color:#B3B3B3;border-radius:4px;box-shadow:inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);color:#333;font:14px Arial, Tahoma, sans-serif;padding:7px 9px}
input[type=search].styler{-webkit-appearance:none}
textarea.styler{overflow:auto}
input[type=email].styler:hover,input[type=number].styler:hover,input[type=password].styler:hover,input[type=search].styler:hover,input[type=tel].styler:hover,input[type=text].styler:hover,input[type=url].styler:hover,textarea.styler:hover{border-color:#B3B3B3}
input[type=email].styler:focus,input[type=number].styler:focus,input[type=password].styler:focus,input[type=search].styler:focus,input[type=tel].styler:focus,input[type=text].styler:focus,input[type=url].styler:focus,textarea.styler:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);outline:none;border-color:#B3B3B3 #CCC #CCC}
button.styler,input[type=button].styler,input[type=submit].styler,input[type=reset].styler{overflow:visible;outline:none;border:1px solid #CCC;border-bottom-color:#B3B3B3;border-radius:4px;background:#F1F1F1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;box-shadow:inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);color:#333;text-shadow:1px 1px #FFF;font:14px Arial, Tahoma, sans-serif;cursor:pointer;padding:7px 11px}
button.styler::-moz-focus-inner,input[type=button].styler::-moz-focus-inner,input[type=submit].styler::-moz-focus-inner,input[type=reset].styler::-moz-focus-inner{border:0;padding:0}
button.styler:after{content:''}
.jq-checkbox.focused,.jq-radio.focused{border:1px solid #08C}
.jq-checkbox.disabled,.jq-radio.disabled{opacity:0.55;filter:alpha(opacity=55)}
.jq-file.focused,.jq-selectbox.focused .jq-selectbox__select,.jq-select-multiple.focused{border:1px solid #5794BF}
.jq-file:hover .jq-file__browse,.jq-selectbox__select:hover,button.styler:hover,input[type=button].styler:hover,input[type=submit].styler:hover,input[type=reset].styler:hover{background-color:#E6E6E6;background-position:0 -10px}
.jq-file:active .jq-file__browse,.jq-selectbox__select:active,button.styler:active,input[type=button].styler:active,input[type=submit].styler:active,input[type=reset].styler:active{background:#F5F5F5;box-shadow:inset 1px 1px 3px #DDD}
.jq-file.disabled,.jq-file.disabled .jq-file__browse,.jq-selectbox.disabled .jq-selectbox__select,.jq-select-multiple.disabled{background:#F5F5F5;box-shadow:none;color:#888;border-color:#CCC}
.jq-selectbox ul,.jq-select-multiple ul{margin:0;padding:0}
.jq-selectbox li:hover,.jq-select-multiple li.selected{background:#08C;color:#FFF}
.jq-selectbox li.disabled,.jq-select-multiple li.disabled{color:#AAA}
.jq-selectbox li.optgroup,.jq-select-multiple li.optgroup{font-weight:700}
.jq-selectbox li.option,.jq-select-multiple li.option{padding-left:25px}

Как использовать?

После 1 кода вставляем это:
Код
<script type="text/javascript">
(function($) {
$(function() {
  $('input, select').styler();
})
})(jQuery)
</script>
И все. Осталось добавить элементы форм на страницу, и можно "колдовать" над стилями.

Дополнительные настройки

Настроек не так много, но все же они есть:
Код
<script type="text/javascript">
$('input, select').styler({
idSuffix:'-select', // Суффикс, добавляемый к ID стандартного элемента. Т.е., если его id "test", то у стилизованного элемента он будет "test-select".
browseText:'Файл не выбран...', // Текст кнопки у загрузчика файлов.
selectVisibleOptions:5, // Кол-во отображаемых пунктов в селекте без прокрутки.
singleSelectzIndex:50, // Уровень слоя с псевдоселектом.
selectSmartPositioning:true // "Умное" позиционирование выпадающего списка.
});
</script>
При динамическом изменении элементов формы нужно запустить переинициализацию:
Код
$('input').trigger('refresh');
На этом все, спасибо за прочтение статьи!
Просмотры: 8498 · Комментарии: 9 · Добавил: Kelin · Категория: Статьи по JavaScript
Комментарии к материалу
15.06.2013 в 15:37
lionez

Как же в свое время, я искал нормальную статью по этому материалу.
Где ты был раньше, web41k:D
16.06.2013 в 13:07
Kelin

Ну вот так smile
15.06.2013 в 12:19
sandu

ребята а откуда взять вот

И все. Осталось добавить элементы форм на страницу, и можно "колдовать" над стилями.
15.06.2013 в 15:25
Goodmind

Элементы форм, такие как 
Код
<input type="checkbox">,<input type="file">,<select>
15.06.2013 в 16:41
sandu

Спасибо !! Бальшое wink
15.06.2013 в 21:54
Goodmind

Учи русский язык. dry
16.06.2013 в 11:49
sandu

Я не Русский biggrin
16.06.2013 в 13:08
Kelin

Все равно учи biggrin
17.06.2013 в 01:01
Goodmind

Да-да
Доступ запрещен
Войдите или Зарегистрируйтесь