├── .csscomb.json
├── .gitignore
├── .stylintrc
├── CHANGELOG.md
├── MIT-LICENSE.md
├── README.md
├── bower.json
├── demo
    ├── demo.css
    ├── demo.js
    └── index.html
├── dist
    ├── jquery.formstyler.css
    ├── jquery.formstyler.js
    ├── jquery.formstyler.min.js
    └── jquery.formstyler.theme.css
├── gulpfile.js
├── package.json
└── src
    ├── jquery.formstyler.styl
    └── jquery.formstyler.theme.styl


/.csscomb.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"always-semicolon": true,
  3 | 	"color-case": "upper",
  4 | 	"block-indent": "\t",
  5 | 	"color-shorthand": true,
  6 | 	"element-case": "lower",
  7 | 	"eof-newline": false,
  8 | 	"leading-zero": false,
  9 | 	"quotes": "single",
 10 | 	"space-before-colon": "",
 11 | 	"space-after-colon": " ",
 12 | 	"space-before-combinator": " ",
 13 | 	"space-after-combinator": " ",
 14 | 	"space-between-declarations": "\n",
 15 | 	"space-before-opening-brace": " ",
 16 | 	"space-after-opening-brace": "\n",
 17 | 	"space-after-selector-delimiter": "\n",
 18 | 	"space-before-selector-delimiter": "",
 19 | 	"space-before-closing-brace": "\n",
 20 | 	"strip-spaces": true,
 21 | 	"tab-size": true,
 22 | 	"unitless-zero": true,
 23 | 	"vendor-prefix-align": false,
 24 | 	"sort-order-fallback": "abc",
 25 | 	"sort-order": [
 26 | 		[
 27 | 			"content",
 28 | 			"counter-reset",
 29 | 			"counter-increment",
 30 | 			"position",
 31 | 			"z-index",
 32 | 			"top",
 33 | 			"right",
 34 | 			"bottom",
 35 | 			"left",
 36 | 			"display",
 37 | 			"vertical-align",
 38 | 			"visibility",
 39 | 			"float",
 40 | 			"clear",
 41 | 			"overflow",
 42 | 			"overflow-x",
 43 | 			"overflow-y",
 44 | 			"-ms-overflow-x",
 45 | 			"-ms-overflow-y",
 46 | 			"clip",
 47 | 			"zoom",
 48 | 			"flex-direction",
 49 | 			"flex-order",
 50 | 			"flex-pack",
 51 | 			"flex-align",
 52 | 			"-webkit-flex-wrap",
 53 | 			"-ms-flex-wrap",
 54 | 			"flex-wrap",
 55 | 			"-webkit-justify-content",
 56 | 			"-ms-flex-pack",
 57 | 			"justify-content",
 58 | 			"-webkit-align-items",
 59 | 			"-ms-flex-align",
 60 | 			"align-items",
 61 | 			"-webkit-flex",
 62 | 			"-ms-flex",
 63 | 			"flex",
 64 | 			"-webkit-order",
 65 | 			"-ms-flex-order",
 66 | 			"order",
 67 | 			"-webkit-align-self",
 68 | 			"-ms-flex-item-align",
 69 | 			"-ms-grid-row-align",
 70 | 			"align-self",
 71 | 			"-webkit-box-sizing",
 72 | 			"-moz-box-sizing",
 73 | 			"box-sizing",
 74 | 			"width",
 75 | 			"min-width",
 76 | 			"max-width",
 77 | 			"height",
 78 | 			"min-height",
 79 | 			"max-height",
 80 | 			"margin",
 81 | 			"margin-top",
 82 | 			"margin-right",
 83 | 			"margin-bottom",
 84 | 			"margin-left",
 85 | 			"padding",
 86 | 			"padding-top",
 87 | 			"padding-right",
 88 | 			"padding-bottom",
 89 | 			"padding-left",
 90 | 			"border",
 91 | 			"border-width",
 92 | 			"border-style",
 93 | 			"border-color",
 94 | 			"border-top",
 95 | 			"border-top-width",
 96 | 			"border-top-style",
 97 | 			"border-top-color",
 98 | 			"border-right",
 99 | 			"border-right-width",
100 | 			"border-right-style",
101 | 			"border-right-color",
102 | 			"border-bottom",
103 | 			"border-bottom-width",
104 | 			"border-bottom-style",
105 | 			"border-bottom-color",
106 | 			"border-left",
107 | 			"border-left-width",
108 | 			"border-left-style",
109 | 			"border-left-color",
110 | 			"border-radius",
111 | 			"border-top-left-radius",
112 | 			"border-top-right-radius",
113 | 			"border-bottom-right-radius",
114 | 			"border-bottom-left-radius",
115 | 			"border-spacing",
116 | 			"border-collapse",
117 | 			"-webkit-border-image",
118 | 			"-moz-border-image",
119 | 			"-o-border-image",
120 | 			"border-image",
121 | 			"-webkit-border-image-source",
122 | 			"-moz-border-image-source",
123 | 			"-o-border-image-source",
124 | 			"border-image-source",
125 | 			"-webkit-border-image-slice",
126 | 			"-moz-border-image-slice",
127 | 			"-o-border-image-slice",
128 | 			"border-image-slice",
129 | 			"-webkit-border-image-width",
130 | 			"-moz-border-image-width",
131 | 			"-o-border-image-width",
132 | 			"border-image-width",
133 | 			"-webkit-border-image-outset",
134 | 			"-moz-border-image-outset",
135 | 			"-o-border-image-outset",
136 | 			"border-image-outset",
137 | 			"-webkit-border-image-repeat",
138 | 			"-moz-border-image-repeat",
139 | 			"-o-border-image-repeat",
140 | 			"border-image-repeat",
141 | 			"outline",
142 | 			"outline-width",
143 | 			"outline-style",
144 | 			"outline-color",
145 | 			"outline-offset",
146 | 			"background",
147 | 			"background-color",
148 | 			"background-image",
149 | 			"background-repeat",
150 | 			"background-attachment",
151 | 			"background-position",
152 | 			"background-position-x",
153 | 			"-ms-background-position-x",
154 | 			"background-position-y",
155 | 			"-ms-background-position-y",
156 | 			"-webkit-background-clip",
157 | 			"-moz-background-clip",
158 | 			"background-clip",
159 | 			"background-origin",
160 | 			"-webkit-background-size",
161 | 			"-moz-background-size",
162 | 			"-o-background-size",
163 | 			"background-size",
164 | 			"box-decoration-break",
165 | 			"box-shadow",
166 | 			"table-layout",
167 | 			"empty-cells",
168 | 			"caption-side",
169 | 			"list-style",
170 | 			"list-style-position",
171 | 			"list-style-type",
172 | 			"list-style-image",
173 | 			"quotes",
174 | 			"resize",
175 | 			"-webkit-user-select",
176 | 			"-moz-user-select",
177 | 			"-ms-user-select",
178 | 			"user-select",
179 | 			"-webkit-appearance",
180 | 			"-moz-appearance",
181 | 			"appearance",
182 | 			"-webkit-overflow-scrolling",
183 | 			"nav-index",
184 | 			"nav-up",
185 | 			"nav-right",
186 | 			"nav-down",
187 | 			"nav-left",
188 | 			"-webkit-transition",
189 | 			"-moz-transition",
190 | 			"-ms-transition",
191 | 			"-o-transition",
192 | 			"transition",
193 | 			"-webkit-column-count",
194 | 			"-moz-column-count",
195 | 			"column-count",
196 | 			"-webkit-column-break-inside",
197 | 			"break-inside",
198 | 			"page-break-inside",
199 | 			"-webkit-transition-delay",
200 | 			"-moz-transition-delay",
201 | 			"-ms-transition-delay",
202 | 			"-o-transition-delay",
203 | 			"transition-delay",
204 | 			"-webkit-transition-timing-function",
205 | 			"-moz-transition-timing-function",
206 | 			"-ms-transition-timing-function",
207 | 			"-o-transition-timing-function",
208 | 			"transition-timing-function",
209 | 			"-webkit-transition-duration",
210 | 			"-moz-transition-duration",
211 | 			"-ms-transition-duration",
212 | 			"-o-transition-duration",
213 | 			"transition-duration",
214 | 			"-webkit-transition-property",
215 | 			"-moz-transition-property",
216 | 			"-ms-transition-property",
217 | 			"-o-transition-property",
218 | 			"transition-property",
219 | 			"-webkit-transform",
220 | 			"-moz-transform",
221 | 			"-ms-transform",
222 | 			"-o-transform",
223 | 			"transform",
224 | 			"-webkit-transform-origin",
225 | 			"-moz-transform-origin",
226 | 			"-ms-transform-origin",
227 | 			"-o-transform-origin",
228 | 			"transform-origin",
229 | 			"-webkit-animation",
230 | 			"-moz-animation",
231 | 			"-ms-animation",
232 | 			"-o-animation",
233 | 			"animation",
234 | 			"-webkit-animation-name",
235 | 			"-moz-animation-name",
236 | 			"-ms-animation-name",
237 | 			"-o-animation-name",
238 | 			"animation-name",
239 | 			"-webkit-animation-duration",
240 | 			"-moz-animation-duration",
241 | 			"-ms-animation-duration",
242 | 			"-o-animation-duration",
243 | 			"animation-duration",
244 | 			"-webkit-animation-play-state",
245 | 			"-moz-animation-play-state",
246 | 			"-ms-animation-play-state",
247 | 			"-o-animation-play-state",
248 | 			"animation-play-state",
249 | 			"-webkit-animation-timing-function",
250 | 			"-moz-animation-timing-function",
251 | 			"-ms-animation-timing-function",
252 | 			"-o-animation-timing-function",
253 | 			"animation-timing-function",
254 | 			"-webkit-animation-delay",
255 | 			"-moz-animation-delay",
256 | 			"-ms-animation-delay",
257 | 			"-o-animation-delay",
258 | 			"animation-delay",
259 | 			"-webkit-animation-iteration-count",
260 | 			"-moz-animation-iteration-count",
261 | 			"-ms-animation-iteration-count",
262 | 			"-o-animation-iteration-count",
263 | 			"animation-iteration-count",
264 | 			"-webkit-animation-direction",
265 | 			"-moz-animation-direction",
266 | 			"-ms-animation-direction",
267 | 			"-o-animation-direction",
268 | 			"animation-direction",
269 | 			"-webkit-text-align-last",
270 | 			"-moz-text-align-last",
271 | 			"-ms-text-align-last",
272 | 			"text-align-last",
273 | 			"white-space",
274 | 			"direction",
275 | 			"-ms-text-justify",
276 | 			"text-justify",
277 | 			"-ms-writing-mode",
278 | 			"-ms-word-wrap",
279 | 			"word-wrap",
280 | 			"word-break",
281 | 			"-ms-word-break",
282 | 			"-moz-tab-size",
283 | 			"-o-tab-size",
284 | 			"tab-size",
285 | 			"-webkit-hyphens",
286 | 			"-moz-hyphens",
287 | 			"hyphens",
288 | 			"pointer-events",
289 | 			"opacity",
290 | 			"font",
291 | 			"font-family",
292 | 			"src",
293 | 			"font-size",
294 | 			"font-weight",
295 | 			"font-style",
296 | 			"font-variant",
297 | 			"font-size-adjust",
298 | 			"font-stretch",
299 | 			"font-effect",
300 | 			"font-emphasize",
301 | 			"font-emphasize-position",
302 | 			"font-emphasize-style",
303 | 			"font-smooth",
304 | 			"line-height",
305 | 			"color",
306 | 			"text-align",
307 | 			"text-decoration",
308 | 			"text-emphasis",
309 | 			"text-emphasis-color",
310 | 			"text-emphasis-style",
311 | 			"text-emphasis-position",
312 | 			"text-indent",
313 | 			"text-shadow",
314 | 			"text-outline",
315 | 			"text-transform",
316 | 			"text-wrap",
317 | 			"text-overflow",
318 | 			"-ms-text-overflow",
319 | 			"text-overflow-ellipsis",
320 | 			"text-overflow-mode",
321 | 			"letter-spacing",
322 | 			"word-spacing",
323 | 			"cursor"
324 | 		]
325 | 	]
326 | }
327 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .sublime-gulp.cache
3 | TODOlist.txt


--------------------------------------------------------------------------------
/.stylintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "brackets": "never",
 3 |   "colons": "never",
 4 |   "duplicates": true,
 5 |   "efficient": "always",
 6 |   "indentPref": false,
 7 |   "leadingZero": "never",
 8 |   "mixed": true,
 9 |   "semicolons": "never",
10 |   "valid": true,
11 |   "zeroUnits": "never"
12 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # История изменений
  2 | 
  3 | ## 2.0.2 <sup>22.10.2017</sup>
  4 | - Исправлено: нативный селект выходил вправо за область псевдоселекта, из-за чего пространство справа от псевдоселекта становилось кликабельным.
  5 | 
  6 | ## 2.0.1 <sup>29.08.2017</sup>
  7 | - Изменено: в отмеченном чекбоксе теперь галочка вместо квадрата.
  8 | - Исправлено: неверный путь в параметре `main` файла _package.json_.
  9 | - Исправлено: для `<input type="number">` не срабатывало событие `input` при нажатии на переключатели.
 10 | 
 11 | ## 2.0.0 <sup>08.05.2017</sup>
 12 | - Добавлено: вызов события `click` для `<input type="checkbox">` и `<input type="radio">` ([#130](https://github.com/Dimox/jQueryFormStyler/pull/130)).
 13 | - Изменено: все обязательные стили вынесены из скрипта в отдельный файл - _jquery.formstyler.css_, а оформление - в _jquery.formstyler.theme.css_.
 14 | - Изменено: удалена опция `singleSelectzIndex` (`z-index` для селекта теперь задается через css-файл).
 15 | - Изменено: нативная прокрутка списка пунктов селекта ([#127](https://github.com/Dimox/jQueryFormStyler/pull/127)).
 16 | - Исправлено: при динамическом изменении `<input type="file">` у псевдоэлемента сбрасывалось значение при том, что оно сохранялось у оригинального элемента.
 17 | 
 18 | ## 1.7.8 <sup>17.02.2017</sup>
 19 | - Исправлено: при отключенном умном позиционировании в селекте (`selectSmartPositioning = '-1'`) не работала опция `selectVisibleOptions`.
 20 | - Исправлено: высота выпадающего списка селекта считалась неверно, когда был задан `selectPlaceholder`, включена опция `selectVisibleOptions` и не указан `min-height` для `.jq-selectbox li`.
 21 | - Исправлено: ([#122](https://github.com/Dimox/jQueryFormStyler/pull/122)).
 22 | 
 23 | ## 1.7.7 <sup>08.01.2017</sup>
 24 | - Добавлено: поддержка мультиязычности.
 25 | - Добавлено: ([#108](https://github.com/Dimox/jQueryFormStyler/pull/108)).
 26 | - Изменено: в _bower.json_ имя `jquery-form-styler` на `jquery.form-styler`.
 27 | - Исправлено: при использовании jQuery 3+ выпадающий список селекта раскрывался только вверх.
 28 | - Исправлено: в _package.json_ была неправильно заполнена секция "main".
 29 | 
 30 | ## 1.7.6 <sup>05.06.2016</sup>
 31 | - Добавлено: поддержка дробных чисел в `<input type="number">`.
 32 | - Добавлено: поддержка передаваемых атрибутов в `<input type="number">`.
 33 | - Изменено: рефакторинг кода передаваемых атрибутов от оригинальных элементов.
 34 | - Изменено: группы радиокнопок (с одинаковым атрибутом `name`) теперь работают и вне тега `<form>`. В связи с этим удалена опция `wrapper`.
 35 | - Изменено: подкорректированы стили для `<input type="file">`, чтобы в браузерах на движке Blink `cursor: pointer` срабатывал по всему полю.
 36 | - Исправлено: улучшен расчет высоты выпадающего списка в селекте, он мог выходить за пределы экрана ([#93](https://github.com/Dimox/jQueryFormStyler/pull/93)).
 37 | - Исправлено: улучшена скорость подсчета ширины селекта на больших списках ([#95](https://github.com/Dimox/jQueryFormStyler/pull/95)).
 38 | - Исправлено: плейсхолдер в селекте теперь отображается только в случае, если по умолчанию выбран первый пункт с отсутствующим текстом.
 39 | 
 40 | ## 1.7.5 <sup>29.05.2016</sup>
 41 | - Добавлено: поддержка события `change` для тега `<input type="number">`.
 42 | - Исправлено: выпадающий список селекта не раскрывался вверх в тех случаях, когда должен был.
 43 | 
 44 | ## 1.7.4 <sup>12.09.2015</sup>
 45 | - Исправлено: [#86](https://github.com/Dimox/jQueryFormStyler/pull/86).
 46 | - Исправлено: [#88](https://github.com/Dimox/jQueryFormStyler/pull/88).
 47 | 
 48 | ## 1.7.3 <sup>05.09.2015</sup>
 49 | - Добавлено: новая опция `fileNumber` для текста "Выбрано файлов: N".
 50 | - Изменено: при выборе файлов в файловом поле с множественным выбором теперь вместо перечисления списка файлов отображается текст "Выбрано файлов: N".
 51 | - Исправлено: [#82](https://github.com/Dimox/jQueryFormStyler/pull/82).
 52 | 
 53 | ## 1.7.2 <sup>15.07.2015</sup>
 54 | - Добавлено: поддержка стилизации тега `<input type="number">`.
 55 | 
 56 | ## 1.7.1 <sup>12.07.2015</sup>
 57 | - Исправлено: ошибка в колбеке `onFormStyled` в случае отсутствия элементов для стилизации.
 58 | - Исправлено: не передавались атрибуты `id` и `title` из тега `<option>`.
 59 | 
 60 | ## 1.7 <sup>21.06.2015</sup>
 61 | - Добавлено: настройки плагина теперь можно извлечь из любого стилизованного элемента.
 62 | - Добавлено: метод `destroy` для отвязки плагина от элемента.
 63 | - Изменено: рефакторинг способа инициализации плагина.
 64 | - Исправлено: устранена утечка памяти, связанная с `$(document).click()` ([#54](https://github.com/Dimox/jQueryFormStyler/issues/54)).
 65 | - Исправлено: текст длинного пункта выходил за пределы селекта с заданной шириной.
 66 | 
 67 | ## 1.6.4 <sup>07.06.2015</sup>
 68 | - Исправлено: неправильная ширина селекта, когда первый пункт длиннее остальных (ширина селекта менялась при выборе пунктов).
 69 | 
 70 | ## 1.6.3 <sup>10.04.2015</sup>
 71 | - Исправлено: в тегах `<option>`, находящихся внутри `<optgroup>`, не передавались data-атрибуты.
 72 | - Исправлено: [#70](https://github.com/Dimox/jQueryFormStyler/pull/70).
 73 | - Исправлено: [#72](https://github.com/Dimox/jQueryFormStyler/pull/72).
 74 | 
 75 | ## 1.6.2 <sup>21.02.2015</sup>
 76 | - Исправлено: если кликнуть на селект, у которого есть плейсхолдер, и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадал.
 77 | - Исправлено: ошибки прокрутки в выпадающем списке селекта, когда у него есть плейсхолдер.
 78 | - Исправлено: проверка на iOS и Android срабатывала и на Windows-смартфонах.
 79 | - Изменено: если выпадающий список селекта выходит за правый край окна браузера, то позиционирование меняется с левого на правое.
 80 | 
 81 | ## 1.6.1 <sup>23.11.2014</sup>
 82 | - Добавлено: поддержка AMD и CommonJS.
 83 | - Исправлено: если в теге `<label>`, который обрамляет `<input type="checkbox">` или `<input type="radio">`, находилась ссылка, то по ней нельзя было перейти.
 84 | - Исправлено: в IE9, если у псевдоселекта не была задана ширина, то она "скакала" при наведении.
 85 | - Исправлено: если плейсхолдер селекта был длиннее, чем `<option>`, то он обрезался.
 86 | - Исправлено: в псевдоселектах к тегам `<li>` теперь не добавляется атрибут `class`, если он пустой.
 87 | - Изменено: CSS-свойства, прописанные в плагине тегам `<li>` в псевдоселектах, перенесены в CSS-файл.
 88 | 
 89 | ## 1.6 <sup>04.10.2014</sup>
 90 | - Добавлено: возможность указать опции плагина конкретным тегам через data-атрибуты.
 91 | - Добавлены новые классы: при открытии выпадающего селекта вверх (`.dropup`) и вниз (`.dropdown`).
 92 | - Исправлено: не всегда корректно рассчитывалась ширина стилизованного селекта.
 93 | - Исправлено: не передавались data-атрибуты от оригинальных элементов.
 94 | 
 95 | ## 1.5.6 <sup>08.09.2014</sup>
 96 | - Добавлено: выпадающий список селекта теперь можно открывать/закрывать пробелом.
 97 | - Изменено: отключена стилизация мультиселекта в Android (в стилизованном селекте нет возможности выбрать несколько пунктов) и iOS (в стилизованном селекте неправильно отображаются выбранные пункты).
 98 | 
 99 | ## 1.5.5 <sup>29.08.2014</sup>
100 | 
101 | - Добавлено: поддержка замещающего текста для селекта (placeholder), который может быть задан через опцию `selectPlaceholder` или атрибут `data-placeholder`, и класс `.placeholder` для его оформления.
102 | - Добавлено: защита от XSS в селекте. В предыдущих версиях плагина, если в опцию вставить `<script>` в виде escape-последовательности, то он исполнялся при выборе этой опции.
103 | - Изменено: поиск в селекте теперь по умолчанию выключен.
104 | 
105 | ## 1.5.4 <sup>12.07.2014</sup>
106 | 
107 | - Изменено поведение опции `selectSmartPositioning`, теперь она может иметь 3 значения (подробнее - в описаниях опций плагина).
108 | - Исправлено: в Internet Explorer не добавлялся класс `.opened` для открытого селекта.
109 | - Исправлено: в Internet Explorer не всегда срабатывал колбек `onSelectOpened`.
110 | 
111 | ## 1.5.3.4 <sup>05.07.2014</sup>
112 | 
113 | - Исправлено: не всегда срабатывал `.change()` для мультиселектов.
114 | - Исправлено: некорректно работал колбек `onSelectClosed`.
115 | 
116 | ## 1.5.3.3 <sup>20.06.2014</sup>
117 | 
118 | - Исправлено: в одиночном селекте при переключении на пункт с таким же названием, как у выбранного, не срабатывало событие `change`.
119 | - Исправлено: при клике на пункт мультиселекта удалялся класс `.focused`.
120 | - Изменено: при клике на пункт одиночного селекта последнему теперь возвращается фокус (поведение стандартного селекта).
121 | 
122 | ## 1.5.3.2 <sup>07.06.2014</sup>
123 | 
124 | - Изменено: при открытии селекта поисковое поле теперь не получает фокус, чтобы можно было переключать пункты с клавиатуры.
125 | - Исправлено: при переключении раскрытого селекта с клавиатуры, если присутствовал вертикальный скроллинг, текущий пункт уходил за пределы видимости.
126 | 
127 | ## 1.5.3.1 <sup>02.06.2014</sup>
128 | 
129 | - Исправлено: не работал `.on('change' ...)` для селектов.
130 | 
131 | ## 1.5.3 <sup>01.06.2014</sup>
132 | 
133 | - Исправлено: после предыдущего обновления некорректно работал `.trigger('refresh')`.
134 | - Код плагина приведен в порядок в соответствии с рекомендациями jshint.
135 | 
136 | ## 1.5.2 <sup>28.05.2014</sup>
137 | 
138 | - Исправлено: если у файлового поля есть атрибут `multiple`, то при выборе нескольких файлов отображалось название только одного из них.
139 | - Исправлено: устранена утечка памяти при запуске `.trigger('refresh')`.
140 | - Исправлено: [#44](https://github.com/Dimox/jQueryFormStyler/issues/44).
141 | 
142 | ## 1.5.1 <sup>03.05.2014</sup>
143 | 
144 | - Исправлено: при динамическом добавлении пунктов в селект переставал открываться выпадающий список в Internet Explorer.
145 | - Добавлено: стили для кнопок с классом `.styler`, имеющих атрибут `disabled`.
146 | 
147 | ## 1.5 <sup>24.04.2014</sup>
148 | 
149 | - Добавлено: к файловому полю теперь добавляется класс `.changed`, когда файл выбран.
150 | - Исправлено: не всегда корректно добавлялся класс `.focused`, когда селект получал фокус.
151 | - Исправлено: при фокусе на селекте нажатие клавиш Space и Enter открывало нативный список селекта.
152 | - Исправлено: в iOS не добавлялся класс `.changed` при изменении селекта.
153 | - Исправлено: [#38](https://github.com/Dimox/jQueryFormStyler/pull/38).
154 | 
155 | ## 1.4.9 <sup>18.03.2014</sup>
156 | 
157 | - Добавлены колбеки, срабатываемые при открытии селекта (`onSelectOpened`), при закрытии селекта (`onSelectClosed`) и после выполнения плагина (`onFormStyled`).
158 | - Заменены все `bind` и `unbind` на `on` и `off`.
159 | - Убрано переключение чекбокса по нажатию Enter.
160 | 
161 | ## 1.4.8.3 <sup>01.03.2014</sup>
162 | 
163 | - Исправлено: [#35](https://github.com/Dimox/jQueryFormStyler/pull/35).
164 | 
165 | ## 1.4.8.2 <sup>26.02.2014</sup>
166 | 
167 | - Исправлено: [#33](https://github.com/Dimox/jQueryFormStyler/pull/33).
168 | 
169 | ## 1.4.8.1 <sup>17.02.2014</sup>
170 | 
171 | - Исправлено: не всегда правильно формировалась ширина псевдоселекта.
172 | 
173 | ## 1.4.8 <sup>02.02.2014</sup>
174 | 
175 | - Изменено: снова переработан способ формирования ширины псевдоселекта. Решил отказаться от возможности задания ширины оригинальному элементу, т.к это только сильно все усложняло. Теперь задать ширину можно только через селекторы `.jq-selectbox` и `.jq-select-multiple` для одиночного и мультиселекта соответственно.
176 | - Исправлено: если при повторном выборе файла сделать отмену, то плейсхолдер не возвращался.
177 | 
178 | ## 1.4.7 <sup>21.12.2013</sup>
179 | 
180 | - Добавлено: на iOS при прокрутке мультиселекта теперь отображается вертикальный скроллинг.
181 | - Добавлено: опция `wrapper` на случай, если стилизуемые элементы находятся вне тега `form`.
182 | - Изменено: доработана функция `preventScrolling()` ([#25](https://github.com/Dimox/jQueryFormStyler/issues/25)).
183 | - Исправлено: если параметр `selectVisibleOptions` был больше нуля, то при каждом последующем клике на селект высота выпадающего списка уменьшалась в 2 раза.
184 | 
185 | ## 1.4.6 <sup>08.12.2013</sup>
186 | 
187 | - Добавлено: поиск в одиночном селекте и соответствующие опции (`selectSearch`, `selectSearchLimit`, `selectSearchNotFound`, `selectSearchPlaceholder`).
188 | - Исправлено: в Mac OS X нельзя было выбрать несколько значений в мультиселекте (по аналогии с зажатым Ctrl на Windows).
189 | - Изменено: полностью переработана система умного позиционирования для выпадающего списка селекта.
190 | - Изменено: опция `browseText` переименована в `fileBrowse`.
191 | 
192 | ## 1.4.5 <sup>24.11.2013</sup>
193 | 
194 | - Добавлена поддержка динамического добавления/изменения атрибутов `class`, `id`, `data-*`, `title`.
195 | 
196 | ## 1.4.4 <sup>17.11.2013</sup>
197 | 
198 | - Добавлена поддержка сброса формы при нажатии на `<input type="reset">`.
199 | 
200 | ## 1.4.3 <sup>09.11.2013</sup>
201 | 
202 | - Решена проблема с селектом в iOS.
203 | 
204 | ## 1.4.2 <sup>03.11.2013</sup>
205 | 
206 | - Добавлено: свойства `margin: 0` и `padding: 0` к оригинальным полям.
207 | - Исправлено: проблема с шириной селекта при изменении размера окна браузера.
208 | 
209 | ## 1.4.1 <sup>27.10.2013</sup>
210 | 
211 | - Исправлено: доработан способ скрытия чекбоксов и радиокнопок, чтобы они не переключались при клике на область рядом с псевдоэлементами.
212 | 
213 | ## 1.4 <sup>13.10.2013</sup>
214 | 
215 | - Добавлено: плейсхолдер для поля выбора файла (новая опция - `filePlaceholder`).
216 | - Изменены стили для поля выбора файла.
217 | - Изменен способ скрытия оригинальных элементов, благодаря чему теперь поддерживается HTML5-валидации.
218 | - Исправлено: ширина селекта, указанная в процентах, теперь меняется, как положено, при изменении ширины его родительского контейнера.
219 | 
220 | ## 1.3.9 <sup>03.10.2013</sup>
221 | 
222 | - Добавлено: поддержка `data-*` атрибутов для тега `option`.
223 | - Изменено: ширину для мультиселекта теперь можно задавать тегу `<select>`.
224 | - Исправлено: ширина для селекта, указанная в процентах, работала неправильно.
225 | 
226 | ## 1.3.8.2 <sup>06.09.2013</sup>
227 | 
228 | - Исправлено: при использовании jQuery версий 1.7-1.8.3 после выбора пункта селекта у родительского контейнера удалялись все классы.
229 | 
230 | ## 1.3.8.1 <sup>21.08.2013</sup>
231 | 
232 | - Исправлена некорректная работа первых двух изменений предыдущей версии плагина в случае, когда для тега `option` добавлялся атрибут `selected`.
233 | 
234 | ## 1.3.8 <sup>12.08.2013</sup>
235 | 
236 | - Добавлено: в одиночном селекте при выборе пункта, отличного от значения по умолчанию, добавляется класс `.changed`, указывающий, что селект изменен (смотрите примеры).
237 | - Добавлено: если у `option` указан какой-либо класс, то при выборе соответствующего пункта этот класс добавляется к родительскому тегу псевдоселекта (смотрите примеры).
238 | - Изменено: все теги `span` заменены на `div`; ранее это было необходимо для поддержки IE7, в котором свойство `display: inline-block` без хаков работает только для строчных элементов.
239 | - Изменено: полностью изменена методика задания ширины одиночного превдоселекта, теперь ширину можно задавать стандартным способом (т.е. тегу `<select>`), как если бы плагин был отключен.
240 | - Исправлено: класс `.opened` не всегда удалялся, когда это было нужно.
241 | 
242 | ## 1.3.7 <sup>27.05.2013</sup>
243 | 
244 | - Добавлено: в псевдоэлементы передается атрибут `title`, указанный у оригинальных элементов.
245 | - Незначительные изменения в файле стилей.
246 | 
247 | ## 1.3.6 <sup>18.05.2013</sup>
248 | 
249 | - Исправлено: при открытии селекта другие не закрывались.
250 | - Изменено: удалено свойство `float: left` у тега `div.jq-selectbox__select` за ненадобностью.
251 | - Изменено: класс `.jq-selectbox__text` переименован в `.jq-selectbox__select-text`.
252 | 
253 | ## 1.3.5 <sup>01.05.2013</sup>
254 | 
255 | - Исправлено: ошибка "Maximum recursion depth exceeded" при клике на неактивный чекбокс или радиокнопку.
256 | - Исправлено: баг, связанный c ускорением прокрутки длинного выпадающего списка в селекте после неоднократно раскрытия/скрытия выпадающего списка.
257 | - Изменено: названия некоторых классов заменены на более уникальные.
258 | 
259 | ## 1.3.4 <sup>03.03.2013</sup>
260 | 
261 | - Исправлено: не работало выделение в мультиселекте в Internet Explorer 8-й и ниже версиях.
262 | 
263 | ## 1.3.3 <sup>08.02.2013</sup>
264 | 
265 | - Добавлена опция, позволяющая отключать умное позиционирование для выпадающего списка селекта (чтобы он раскрывался всегда вниз).
266 | - Изменен способ скрытия оригинальной радиокнопки (ранее при отсутствии фона у родителя ее было видно).
267 | - Исправлено: в некоторых случаях с псевдо-радиокнопки не снималось отмеченное состояние.
268 | 
269 | ## 1.3.2 <sup>27.01.2013</sup>
270 | 
271 | - Добавлено: переключение селекта с клавиатуры.
272 | - Добавлено: прокрутка до 1-го выбранного пункта в мультиселекте.
273 | - Добавлено: в псевдоэлементы теперь передаются все `data-*` атрибуты, указанные у оригинальных элементов.
274 | - Исправлено: если в одиночном селекте нет пунктов с атрибутом `selected`, то к первому `<li>` не добавлялся класс `.selected`.
275 | - Изменено: к атрибуту `id`, передаваемому от стилизуемого элемента, теперь добавляется суффикс (можно указать свой через опцию).
276 | - Изменено: уменьшен z-index по умолчанию для одиночного селекта.
277 | 
278 | ## 1.3.1 <sup>23.01.2013</sup>
279 | 
280 | - Внесены изменения, необходимые для корректной работы плагина с jQuery 1.9.
281 | - Исправлена ошибка, связанная с неправильной работой динамического изменения селектов.
282 | 
283 | ## 1.3 <sup>17.01.2013</sup>
284 | 
285 | - Реализована поддержка тега `<optgroup>` в селекте.
286 | 
287 | ## 1.2.5 <sup>15.01.2013</sup>
288 | 
289 | - Изменен способ эмуляции `<input type="file">`, что позволило избавиться от двух далее описанных багов в Firefox и IE.
290 | - Изменены названия CSS-классов у псевдоэлементов на более уникальные (соответственно, файл jquery.formstyler.css изменен).
291 | - Изменено: опция `zIndex` переименована в `singleSelectzIndex`.
292 | - Исправлено: в браузере Firefox обрабатывался клик по `<input type="file">` в состоянии `disabled`.
293 | - Исправлено: в браузере Internet Explorer динамически измененный `<input type="file">` не передавал файл на сервер.
294 | - Исправлено: у простого селекта теперь убирается фокус при переключении Tab'ом на другой элемент формы.
295 | - Добавлено: поддержка фокуса для `<input type="file">` при нажатии на Tab.
296 | - Добавлено: к родительскому тегу простого селекта добавляется класс `.opened` при раскрытии выпадающего списка.
297 | - Добавлено: CSS-классы, указанные для `<option>` передаются тегу `<li>` в псевдоселекте.
298 | - Добавлено: новая опция `selectVisibleOptions` для селекта (см. описание выше в статье).
299 | 
300 | ## 1.2.2 <sup>14.01.2013</sup>
301 | 
302 | - Исправлен баг в Firefox: если у первого пункта селекта стоял атрибут `selected`, то при выборе любого другого пункта передавалось значение первого.
303 | 
304 | ## 1.2.1 <sup>09.01.2013</sup>
305 | 
306 | - Псевдоэлементам теперь передаются те же идентификаторы и классы, которые указаны для стилизуемых элементов форм.
307 | - При прокрутке списка одиночного селекта страница теперь не прокручивается (ранее это работало только для мультиселекта).
308 | - При открытии селекта с длинным списком теперь сразу виден выбранный пункт (ранее его могло быть не видно, и приходилось прокручивать список, чтобы его найти).
309 | 
310 | ## 1.2 <sup>26.11.2012</sup>
311 | 
312 | - Добавлена поддержка атрибута `multiple` для тега `<select>`.
313 | - Добавлена поддержка атрибута `disabled` для тега `<input type="file">`.
314 | 
315 | ## 1.1.3 <sup>20.11.2012</sup>
316 | 
317 | - Решена возникающая в ряде случаев проблема с селектом в браузере Firefox при использовании атрибута `selected`.
318 | 
319 | ## 1.1.2 <sup>15.10.2012</sup>
320 | 
321 | - Плагин теперь реагирует на применение метода `change` у тега `<input type="radio">`.
322 | - Добавлена опция `zIndex`.
323 | 
324 | ## 1.1 <sup>13.10.2012</sup>
325 | 
326 | - Добавлена поддержка атрибута `disabled` для тега `<select>`.
327 | 
328 | ## 1.0 <sup>09.10.2012</sup>
329 | 
330 | - Первая версия плагина.


--------------------------------------------------------------------------------
/MIT-LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012-2017 Dimox
2 | http://dimox.name/
3 | 
4 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
5 | 
6 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
7 | 
8 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jQuery Form Styler <sup>[2.0.2](https://github.com/Dimox/jQueryFormStyler/blob/master/CHANGELOG.md)</sup>
 2 | 
 3 | jQuery-плагин для стилизации элементов HTML-форм:
 4 | 
 5 | - `<input type="checkbox">`
 6 | - `<input type="radio">`
 7 | - `<input type="file">`
 8 | - `<input type="number">`
 9 | - `<select>`
10 | 
11 | ## Ссылки
12 | 
13 | - [Страница с примерами](https://dimox.github.io/jQueryFormStyler/demo/)
14 | - [Домашняя страница плагина](http://dimox.name/jquery-form-styler/)
15 | - [Плагин в CDN jsDelivr](https://www.jsdelivr.com/package/npm/jquery-form-styler) [![](https://data.jsdelivr.com/v1/package/npm/jquery-form-styler/badge)](https://www.jsdelivr.com/package/npm/jquery-form-styler)
16 | 
17 | ## Лицензия
18 | 
19 | [MIT](https://github.com/Dimox/jQueryFormStyler/blob/master/MIT-LICENSE.md)


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "jquery.form-styler",
 3 | 	"version": "2.0.2",
 4 | 	"main": [
 5 | 		"dist/jquery.formstyler.js",
 6 | 		"dist/jquery.formstyler.css"
 7 | 	],
 8 | 	"description": "jQuery-плагин для стилизации элементов HTML-форм",
 9 | 	"keywords": [
10 | 		"jquery",
11 | 		"form",
12 | 		"styler",
13 | 		"dimox"
14 | 	],
15 | 	"license": "MIT",
16 | 	"ignore": [
17 | 		"**/.*",
18 | 		"*.txt",
19 | 		"demo"
20 | 	]
21 | }


--------------------------------------------------------------------------------
/demo/demo.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | }
  5 | body {
  6 | 	overflow-y: scroll;
  7 | 	background: #F5F5F5;
  8 | 	font: 15px/18px Arial, sans-serif;
  9 | 	color: #333;
 10 | }
 11 | h1 {
 12 | 	height: 70px;
 13 | 	margin: 0 0 30px;
 14 | 	background: #3C454B;
 15 | 	font-size: 26px;
 16 | 	font-weight: normal;
 17 | 	line-height: 68px;
 18 | 	color: #FFF;
 19 | 	text-align: center;
 20 | 	letter-spacing: .5px;
 21 | }
 22 | h1 a {
 23 | 	color: #09C98C;
 24 | 	text-decoration: none;
 25 | }
 26 | h2 {
 27 | 	margin: 0 0 15px;
 28 | 	font-size: 21px;
 29 | 	line-height: 1;
 30 | 	color: #444;
 31 | }
 32 | a {
 33 | 	color: #08D;
 34 | }
 35 | a:hover {
 36 | 	color: #0AD;
 37 | }
 38 | code {
 39 | 	padding: 0 3px 1px;
 40 | 	border: 1px solid #E1E1E1;
 41 | 	border-radius: 3px;
 42 | 	background: #F6F6F6;
 43 | 	color: #EA0000;
 44 | }
 45 | label {
 46 | 	cursor: pointer;
 47 | }
 48 | p {
 49 | 	margin: 0 0 15px;
 50 | }
 51 | small {
 52 | 	font-size: 12px;
 53 | }
 54 | .wrapper {
 55 | 	position: relative;
 56 | 	min-width: 300px;
 57 | 	max-width: 980px;
 58 | 	margin: 0 auto;
 59 | 	padding: 0 10px;
 60 | }
 61 | .wrapper:after {
 62 | 	content: '';
 63 | 	display: table;
 64 | 	clear: both;
 65 | }
 66 | .menu {
 67 | 	float: left;
 68 | 	width: 290px;
 69 | 	margin: 36px 0 0;
 70 | 	border-radius: 3px;
 71 | }
 72 | .menu li {
 73 | 	padding: 9px 0 9px 12px;
 74 | 	border-top: 1px solid #F5F5F5;
 75 | 	background: #FFF;
 76 | 	list-style: none;
 77 | 	cursor: pointer;
 78 | }
 79 | .menu li:first-child {
 80 | 	border-top: none;
 81 | 	border-radius: 3px 3px 0 0;
 82 | }
 83 | .menu li:last-child {
 84 | 	border-radius: 0 0 3px 3px;
 85 | }
 86 | .menu li:hover,
 87 | .menu li.current {
 88 | 	color: #FFF;
 89 | }
 90 | .menu li.current {
 91 | 	background: #F07E6F;
 92 | }
 93 | .menu li:hover {
 94 | 	background: #EE6D5B;
 95 | }
 96 | .content {
 97 | 	float: right;
 98 | 	width: 670px;
 99 | }
100 | .box {
101 | 	position: absolute;
102 | 	top: -500px;
103 | 	left: 0;
104 | 	overflow: hidden;
105 | 	height: 100px;
106 | }
107 | .box.visible {
108 | 	position: static;
109 | 	overflow: visible;
110 | 	width: auto;
111 | 	height: auto;
112 | }
113 | .section {
114 | 	margin: 0 0 20px;
115 | 	padding: 20px;
116 | 	border-radius: 3px;
117 | 	background: #FFF;
118 | }
119 | .section:after {
120 | 	content: '';
121 | 	display: table;
122 | 	clear: both;
123 | }
124 | .section.lh {
125 | 	padding: 12px 20px;
126 | 	line-height: 40px;
127 | }
128 | .sec {
129 | 	float: right;
130 | 	width: calc(50% - 10px);
131 | }
132 | .sec:first-child {
133 | 	float: left;
134 | }
135 | 
136 | .number-plus-minus .jq-number {
137 | 	padding: 0 38px;
138 | }
139 | .number-plus-minus .jq-number__field {
140 | 	width: 60px;
141 | }
142 | .number-plus-minus .jq-number__field input {
143 | 	text-align: center;
144 | }
145 | .number-plus-minus .jq-number__spin {
146 | 	left: 0;
147 | 	height: 32px;
148 | }
149 | .number-plus-minus .jq-number__spin.plus {
150 | 	right: 0;
151 | 	left: auto;
152 | }
153 | .number-plus-minus .jq-number__spin:before {
154 | 	content: '';
155 | 	position: absolute;
156 | 	top: 15px;
157 | 	left: 10px;
158 | 	width: 12px;
159 | 	height: 2px;
160 | 	border: none;
161 | 	background: #666;
162 | }
163 | .number-plus-minus .jq-number__spin.minus:after {
164 | 	display: none;
165 | }
166 | .number-plus-minus .jq-number__spin.plus:after {
167 | 	top: 10px;
168 | 	left: 15px;
169 | 	width: 2px;
170 | 	height: 12px;
171 | 	border: none;
172 | 	background: #666;
173 | }
174 | .number-plus-minus .jq-number__spin:hover:before,
175 | .number-plus-minus .jq-number__spin.plus:hover:after {
176 | 	background: #000;
177 | }
178 | 
179 | .jq-selectbox {
180 | 	width: 250px;
181 | }
182 | .jq-selectbox.width-auto {
183 | 	width: auto;
184 | }
185 | .jq-selectbox.width-200 {
186 | 	width: 200px;
187 | }
188 | .maxheight .jq-selectbox__dropdown ul {
189 | 	max-height: 203px;
190 | }
191 | .showChanged .jq-selectbox.changed .jq-selectbox__select {
192 | 	box-shadow: 0 0 0 5px #CDFF9B;
193 | }
194 | 
195 | .lang-en,
196 | .lang-en .jq-selectbox__select-text {
197 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbpJREFUeNqkk81LW0EUxc8zz0YRBaEqCBrswm7dWqhB7KYLFdEqBU0pdNXi1m7Ff6Ab240bv7ALKWjiWshTWpBGsBGNgrFPa+pHkaio+PFyvBMnmKa4SHPh8HvzZubOmZk7BknkEnnIMUzj1dAUrpxWOAlpZrjJcwEPinA46kNcmk5al3G7+ldTTZ7sbUFHfSXGglvo8VZjzBI2VGPE2kZ3QxVczQ5KXW49TUFY4Mbm87YnQNdHqkDjBL9H40TTZ4Y0F6JHxLMvvJT+P6J9rQPRoSgQiYjlrkH2T28xZJ8QzX7++KUY0JyhtXNNukEWahWI8kUfBvgzuWdJkEiIg/ZZhndOiRezXI6dJbkUOyc6v/Eqw8F+ysHKqiR4+Ymd47sM/b4kekJc2hP6UlxkUI0ukxXLRRWaD0V9r7UD3whtdQZvY7Tiwnd3DCZ5wPP7HKxGaBxJlpI3TwFr7u5+0kPdbOqGmfbP64U9HIQ5H1mD93EtLv6tgr9yZPaZovD7dRhqH54WD7BtZ1eCVR7YfhtmeCOK0kc1uM6yhKVGsRzdhLEBHMt3cbZPSh/ViWKdTvg/4Ri5PucbAQYA8gA3rogcqYQAAAAASUVORK5CYII=) no-repeat 0 7px;
198 | }
199 | .lang-es,
200 | .lang-es .jq-selectbox__select-text {
201 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaFJREFUeNqkk79LHEEUxz8zOx4GdSGVcIRwEEhhZSMBBSF1ENOliUHs0kSwTiv+CWKtdeKZPyDY5ooELESROwJGEe7HnkcgrLczvpk9udNGLvfY786vfd/3fe/NKucco5gamaAK+0KxPCyNylFWZ+Cmy9+g25UdLVCPuEooa8EYrpaXMJls2YuEq48rQymY3t7D+5qXu/J+nxC/6+vyQbD9gGHuBube81mdeAo0HVmkLcLoER9QPfokYxnask6EMdF9+L1rj0b43gTGtBHYa3+gvrNBe3yR1G4xJr4vinKQqb6CO6TNoEYHmbbpqfhr5vlyOEPtIOHpz0065hVEvbQeWrceBkMkp0oUFODiwznzb49pJhP8ujlBryfw1efs8u4MKlASVHw1sRxMCNskVD6v8vxNi/OFiH9JjR8bazDl6yIese2BHE/EJ9aoE+Ervp6D31WiyMlV0MgjQZy025F1IzKrcfcukUWXSlx+r2B8imPj19hiIe+a8l2666WodKpXqEHTROITynMqDdG50KFNEur4ULPktf4fy0b+G28FGACzeZrTM/MAlgAAAABJRU5ErkJggg==) no-repeat 0 7px;
202 | }
203 | .lang-de,
204 | .lang-de .jq-selectbox__select-text {
205 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATxJREFUeNqkkztKBEEQhv/q7mkf+EC8gRi5iYOYeQDBwEu4N1gx8gCiBxDWyBNo5h3EMyiC4S4yujPa0w+rRgMjZ9Zt6KApvvr/quqilBJmOQozHpPn+Y1z7jDGOJ2yUrDW3tJWr5eGwyuEEEBEoBZQCpaytdbo949gHD+KssTg+ARZZjjcnqKuPS7OzyCs2fh4RxiPsOkraGVB6u+2JC41eNcwwprTl2fsjR9xUD9xeI4NtDiQqdWfADOrzJpKBH0JrC8BOuPutCSInCBkDSOsCdJ8PwFWFhk23RzErGGENZ7doHLsnh0o3amJiKFhhKV0rRL2d4Di/gfuNEh2vAvcPcBgwoXQK2BZPXX8mBS/GWYNEiuujYAF1UH91wbMM8Ms+Utb6IhlxOm3KCi8ieQ2X/3PXQo06zp/CTAALyGCuAjgGMwAAAAASUVORK5CYII=) no-repeat 0 7px;
206 | }
207 | .lang-ru,
208 | .lang-ru .jq-selectbox__select-text {
209 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASxJREFUeNqkk01Ow0AMhZ8zTlMRUUSQuqg4AWyqHCKwoldhzQF6HmADtLkCWSCBxAHYIPEjugCUzEzthn2mxJJnMdI3fs8ek/cefSJCz+CyLC+dczPJ7SpHkeYVe4GLokBjrVyH2iGwMVguFjNmaiH7+yPXYaEE76RQlh/eGky/Gzy+rESSvk0dsIe6PT5MoCyf37zjNX3G/PpJjAlMHTp0as7j4uwIc2EZA/FDMcbZCLGhIAW19Rtmw0KaUbsB9tM9GFEQIsCKAmWUZSQjfCQZOFMHYQ+QHMooS/cD+PzkFHVVtT3onEXbgzjPUd3dgj+HIikewk4m8BQ2SFUQCaMsOxmdiQlmfPBXPECBfgRhlKVlhi/vsLvtTqlYirDSclNJ889dstR3ndcCDABI0W9vitkDJAAAAABJRU5ErkJggg==) no-repeat 0 7px;
210 | }
211 | .lang-fr,
212 | .lang-fr .jq-selectbox__select-text {
213 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcRJREFUeNqkk71OG0EUhc+dn13bYGwlZZQ8QHCRgipSKiRaKhrEI4CiPFFSIqWAFJHSR6KhpSASTxDFFhvzY5udmZyZ9S4LZTzSaHdn9p77nXtnJISAVYbCisPI0ckpSr8LT5JIMw+4OHyFYhHg/JJOa/jBAK9HI/in2c9MDP7+cYePuBUwXQCbbzPcLTxc7U4puLUeht++AuvrgDDUGlx92H5vYuZiXmL/y6/KEDNvf3qJ6/mjQFAabmOA4cEe0M9BNODzcWUBAkz4M7qaAvxQAb1Ohnu0BGjBdTvMzgz9HgVKYFosBTgmxEUmJBMEvlprYZhF/KOAMhmQM0nOEMdEN9ctgpljFDclrgRk9JdRoKwrFgm4BivVNCS5bRM8RIFlR42HNpY1cg1BFNCmFtBV/RuCJBAgRqcupBVasE49EfBpXZLVhHrXsvCndFDcTG03klpk6bMtkOpZWxDO+4ZAMClJQDThQQouEuawWbRQHyRTCeSqKqTmc/a3JhCMA6vczdiB+FtSYAzn83PbN9UkEVwjgOn453m/Ocozj8ut3xjPYheWBCygH77Amx8FSYpGj7vTWJF3EfI/75KTVa/zPwEGAOCWsO19nu/2AAAAAElFTkSuQmCC) no-repeat 0 7px;
214 | }
215 | .lang .changed .jq-selectbox__select-text {
216 | 	padding-left: 25px;
217 | }
218 | .lang .jq-selectbox li {
219 | 	padding-left: 35px;
220 | 	background-position: 10px 6px;
221 | }
222 | .lang .jq-selectbox li:first-child {
223 | 	padding-left: 10px;
224 | }
225 | 
226 | .jq-select-multiple.width-400 {
227 | 	width: 400px;
228 | }
229 | 
230 | .buttons {
231 | 	float: right;
232 | 	width: 270px;
233 | 	text-align: right;
234 | }
235 | .button:not([disabled]) {
236 | 	height: 32px;
237 | 	margin: 3px 0 10px;
238 | 	padding: 0 13px;
239 | 	border: none;
240 | 	border-radius: 4px;
241 | 	outline: none;
242 | 	background: #EBEBEB;
243 | 	box-shadow: 0 1px rgba(0,0,0,.15);
244 | 	font: 14px/1 Arial, Tahoma, sans-serif;
245 | 	cursor: pointer;
246 | }
247 | .button::-moz-focus-inner {
248 | 	padding: 0;
249 | 	border: 0;
250 | }
251 | .button:not([disabled]):hover {
252 | 	background: #4EA7DC;
253 | 	box-shadow: 0 2px rgba(0,0,0,.15);
254 | 	color: #FFF;
255 | }
256 | .button:not([disabled]):active {
257 | 	position: relative;
258 | 	top: 1px;
259 | 	background: #2B95D5;
260 | 	box-shadow: none;
261 | }
262 | .button:after {
263 | 	content: '';
264 | }
265 | .lh .button {
266 | 	margin: 10px 0 0;
267 | }
268 | .jq-file {
269 | 	margin: 3px 0 0;
270 | }
271 | .color1 {
272 | 	background: #FFE8AA;
273 | }
274 | .color2 {
275 | 	background: #D2FFAA;
276 | }
277 | .css input,
278 | .css textarea,
279 | .css button {
280 | 	margin: 0 0 20px;
281 | }
282 | .css input[type='text'],
283 | .css input[type='password'],
284 | .css textarea {
285 | 	width: 375px;
286 | }
287 | .css input[type='number'] {
288 | 	width: 50px;
289 | }
290 | .css code {
291 | 	position: relative;
292 | 	top: 7px;
293 | 	vertical-align: top;
294 | 	margin-left: 6px;
295 | }
296 | 
297 | /* Media Queries
298 | -----------------------------------------------------------------------------*/
299 | @media screen and (max-width: 999px) {
300 | 	.menu {
301 | 		position: fixed;
302 | 		z-index: 101;
303 | 		top: 0;
304 | 		left: -320px;
305 | 		width: 320px;
306 | 		height: 100%;
307 | 		margin: 0;
308 | 		border-radius: 0;
309 | 		background: #FFF;
310 | 		transition: left .25s ease-in;
311 | 	}
312 | 	.menu-active .menu {
313 | 		left: 0;
314 | 	}
315 | 	.menu li {
316 | 		padding: 14px 18px;
317 | 	}
318 | 	.menu li:first-child,
319 | 	.menu li:last-child {
320 | 		border-radius: 0;
321 | 	}
322 | 
323 | 	.menu-toggle {
324 | 		position: absolute;
325 | 		top: 22px;
326 | 		left: 20px;
327 | 		width: 40px;
328 | 		height: 26px;
329 | 		box-shadow: inset 0 4px #FFF,
330 | 			inset 0 11px #3C454B,
331 | 			inset 0 15px #FFF,
332 | 			inset 0 22px #3C454B,
333 | 			inset 0 26px #FFF
334 | 		;
335 | 	}
336 | 	.menu-toggle:after {
337 | 		content: '';
338 | 		position: absolute;
339 | 		top: 0;
340 | 		bottom: 0;
341 | 		left: 5px;
342 | 		width: 5px;
343 | 		background: #3C454B;
344 | 	}
345 | 
346 | 	.menu-overlay {
347 | 		position: fixed;
348 | 		z-index: 101;
349 | 		top: 0;
350 | 		right: 0;
351 | 		bottom: 0;
352 | 		left: 0;
353 | 		background: rgba(0,0,0,.4);
354 | 	}
355 | 
356 | 	h1 {
357 | 		font-size: calc(.2rem + 2.7vmin);
358 | 	}
359 | 
360 | 	.wrapper {
361 | 		max-width: 670px;
362 | 	}
363 | 
364 | 	.content {
365 | 		float: none;
366 | 		width: auto;
367 | 	}
368 | 
369 | 	.css input[type='text'],
370 | 	.css input[type='password'],
371 | 	.css textarea {
372 | 		display: block;
373 | 		box-sizing: border-box;
374 | 		width: 100%;
375 | 		margin: 0;
376 | 	}
377 | 	.css input[type='text'] + code,
378 | 	.css input[type='password'] + code,
379 | 	.css textarea + code {
380 | 		display: table;
381 | 		margin: 0 0 27px;
382 | 	}
383 | 	.css textarea + code + br {
384 | 		display: none;
385 | 	}
386 | }
387 | @media screen and (max-width: 639px) {
388 | 	h1 {
389 | 		box-sizing: border-box;
390 | 		padding: 11px 0 0 40px;
391 | 		font-size: 19px;
392 | 		line-height: 1.3;
393 | 		letter-spacing: 0;
394 | 	}
395 | 	h1 a:before {
396 | 		content: '';
397 | 		display: block;
398 | 	}
399 | 
400 | 	.section,
401 | 	.section.lh {
402 | 		margin-right: -10px;
403 | 		margin-left: -10px;
404 | 		padding: 15px 10px;
405 | 	}
406 | 
407 | 	.sec,
408 | 	.sec:first-child {
409 | 		float: none;
410 | 		width: auto;
411 | 	}
412 | 	.sec:last-child {
413 | 		margin: 20px 0 0;
414 | 	}
415 | 
416 | 	.buttons {
417 | 		float: none;
418 | 		width: auto;
419 | 		margin: 8px 0 10px;
420 | 		text-align: left;
421 | 	}
422 | 	.buttons:after {
423 | 		content: '';
424 | 		display: table;
425 | 		clear: both;
426 | 	}
427 | 
428 | 	.button:not([disabled]) {
429 | 		float: left;
430 | 		margin: 0 10px 10px 0;
431 | 	}
432 | 
433 | 	.css input,
434 | 	.css button {
435 | 		margin: 0;
436 | 	}
437 | 	.css code {
438 | 		display: table;
439 | 		margin: 0 0 27px;
440 | 	}
441 | 	.css code + br {
442 | 		display: none;
443 | 	}
444 | }


--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
  1 | (function($) {
  2 | $(function() {
  3 | 
  4 | 	$('ul.menu').on('click', 'li', function() {
  5 | 		$(this).addClass('current').siblings().removeClass('current')
  6 | 			.parents('div.wrapper').find('div.box').removeClass('visible').eq($(this).index()).addClass('visible');
  7 | 		 window.location.hash = $(this).data('hash');
  8 | 		 $('input').blur();
  9 | 		 $('body').removeClass('menu-active');
 10 | 		 $('div.menu-overlay').remove();
 11 | 	});
 12 | 	hash = window.location.hash.replace(/#(.+)/, '$1');
 13 | 	if ( hash !== '' ) {
 14 | 		$('ul.menu li[data-hash='+hash+']').click();
 15 | 	}
 16 | 
 17 | 	$('div.menu-toggle').click(function() {
 18 | 		$('body').addClass('menu-active');
 19 | 		$('div.menu-toggle').after('<div class="menu-overlay"></div>');
 20 | 	});
 21 | 
 22 | 	$('body').on('click', 'div.menu-overlay', function() {
 23 | 		$('body').removeClass('menu-active');
 24 | 		$('div.menu-overlay').remove();
 25 | 	});
 26 | 
 27 | 	$.fn.toggleDisabled = function() {
 28 | 		return this.each(function() {
 29 | 			this.disabled = !this.disabled;
 30 | 		});
 31 | 	};
 32 | 
 33 | 	$.fn.toggleChecked = function() {
 34 | 		return this.each(function() {
 35 | 			this.checked = !this.checked;
 36 | 		});
 37 | 	};
 38 | 
 39 | 	$('button').click(function(e) {
 40 | 		e.preventDefault();
 41 | 	});
 42 | 
 43 | 	$('button.add-checkbox').click(function() {
 44 | 		var inputs = '';
 45 | 		for (var i = 1; i <= 5; i++) {
 46 | 			inputs += '<label><input type="checkbox" name="checkbox" /> чекбокс ' + i + '</label><br />';
 47 | 		}
 48 | 		$(this).closest('div.section').append('<div>' + inputs + '</div>');
 49 | 		$('input:checkbox').styler();
 50 | 	});
 51 | 
 52 | 	$('button.add-radio').click(function() {
 53 | 		var inputs = '';
 54 | 		for (var i = 1; i <= 5; i++) {
 55 | 			inputs += '<label><input type="radio" name="radio" /> радиокнопка ' + i + '</label><br />';
 56 | 		}
 57 | 		$(this).closest('div.section').append('<div>' + inputs + '</div>');
 58 | 		$('input:radio').styler();
 59 | 	});
 60 | 
 61 | 	$('button.add-file').click(function() {
 62 | 		var file = $('<input type="file" name="" />');
 63 | 		$(this).closest('div.section').append(file);
 64 | 		file.wrap('<div></div>').styler();
 65 | 	});
 66 | 
 67 | 	$('button.add-number').click(function() {
 68 | 		var number = $('<input type="number" />');
 69 | 		$(this).closest('div.section').append(number);
 70 | 		number.before('<br /><br />').styler();
 71 | 	});
 72 | 
 73 | 	$('button.add-select').click(function() {
 74 | 		var multiple = '';
 75 | 		if ( $(this).is('.multiple') ) multiple = ' multiple';
 76 | 		var select = $('<select' + multiple +'><option>-- Выберите --</option><option>Пункт 1</option><option>Пункт 2</option><option>Пункт 3</option><option>Пункт 4</option><option>Пункт 5</option></select>');
 77 | 		$(this).closest('div.section').append(select);
 78 | 		select.before('<br /><br />').styler();
 79 | 	});
 80 | 
 81 | 	$('button.add-options').click(function() {
 82 | 		var options = '';
 83 | 		for (i = 1; i <= 5; i++) {
 84 | 			options += '<option>Опция ' + i + '</option>';
 85 | 		}
 86 | 		$(this).closest('div.section').find('select').each(function() {
 87 | 			$(this).append(options);
 88 | 		}).trigger('refresh');
 89 | 	});
 90 | 
 91 | 	$('button.check').click(function() {
 92 | 		$(this).closest('div.section').find('input').toggleChecked().trigger('refresh');
 93 | 	});
 94 | 
 95 | 	$('button.disable-input').click(function() {
 96 | 		$(this).closest('div.section').find('input').toggleDisabled().trigger('refresh');
 97 | 	});
 98 | 
 99 | 	$('button.disable-select').click(function() {
100 | 		$(this).closest('div.section').find('select').toggleDisabled().trigger('refresh');
101 | 	});
102 | 
103 | 	$('button.disable-options').click(function() {
104 | 		$(this).closest('div.section').find('option').toggleDisabled().trigger('refresh');
105 | 	});
106 | 
107 | });
108 | })(jQuery);


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="utf-8" />
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 | 	<title>Примеры для плагина jQuery Form Styler</title>
  7 | 	<link href="demo.css" rel="stylesheet" />
  8 | 	<link href="../dist/jquery.formstyler.css" rel="stylesheet" />
  9 | 	<link href="../dist/jquery.formstyler.theme.css" rel="stylesheet" />
 10 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 11 | 	<script src="../dist/jquery.formstyler.js"></script>
 12 | 	<script>
 13 | 		(function($) {
 14 | 		$(function() {
 15 | 			$('input, select').styler({
 16 | 				selectSearch: true,
 17 | 			});
 18 | 		});
 19 | 		})(jQuery);
 20 | 	</script>
 21 | 	<script src="demo.js"></script>
 22 | </head>
 23 | 
 24 | <body>
 25 | 
 26 | <h1>Примеры для плагина <a href="http://dimox.name/jquery-form-styler/">jQuery Form Styler</a></h1>
 27 | 
 28 | <div class="menu-toggle"></div>
 29 | 
 30 | <div class="wrapper">
 31 | 
 32 | 	<ul class="menu">
 33 | 		<li class="current" data-hash="checkbox">Чекбоксы</li>
 34 | 		<li data-hash="radio">Радиокнопки</li>
 35 | 		<li data-hash="file">Поле для выбора файла</li>
 36 | 		<li data-hash="number">Поле для ввода чисел</li>
 37 | 		<li data-hash="select">Одиночные селекты</li>
 38 | 		<li data-hash="multiselect">Мультиселекты</li>
 39 | 		<li data-hash="css">Прочие элементы форм (только CSS)</li>
 40 | 	</ul>
 41 | 
 42 | 	<div class="content">
 43 | 
 44 | 		<div class="box visible">
 45 | 			<h2>Чекбоксы</h2>
 46 | 
 47 | 			<div class="section lh">
 48 | 				<div class="buttons">
 49 | 					<button type="submit" class="button  add-checkbox">Добавить чекбоксы</button>
 50 | 					<button type="submit" class="button  disable-input">Переключить активность</button>
 51 | 					<button type="submit" class="button  check">Переключить галочки</button>
 52 | 				</div>
 53 | 				<input type="checkbox" /> без тега <code>label</code><br />
 54 | 				<span id="r"><input type="checkbox" id="checkbox1" /></span> <label for="checkbox1"> в тег <code>label</code> помещен только текст</label><br />
 55 | 				<label><input type="checkbox" /> и текст, и <code>input</code> помещены в тег <code>label</code></label><br />
 56 | 				<label><input type="checkbox" disabled checked /> неактивный чекбокс</label>
 57 | 			</div><!-- .section -->
 58 | 		</div><!-- .box -->
 59 | 
 60 | 		<div class="box">
 61 | 			<h2>Радиокнопки</h2>
 62 | 
 63 | 			<div class="section lh">
 64 | 				<div class="buttons">
 65 | 					<button type="submit" class="button  add-radio">Добавить радиокнопки</button>
 66 | 					<button type="submit" class="button  disable-input">Переключить активность</button>
 67 | 				</div>
 68 | 				<input type="radio" name="radio" /> без тега <code>label</code><br />
 69 | 				<input type="radio" name="radio" id="radio1" /> <label for="radio1"> в тег <code>label</code> помещен только текст</label><br />
 70 | 				<label><input type="radio" name="radio" /> и текст, и <code>input</code> помещены в тег <code>label</code></label><br />
 71 | 				<label><input type="radio" name="radio" disabled /> неактивная радиокнопка</label>
 72 | 			</div><!-- .section -->
 73 | 		</div><!-- .box -->
 74 | 
 75 | 		<div class="box">
 76 | 			<h2>Поле для выбора файла</h2>
 77 | 
 78 | 			<div class="section">
 79 | 				<div class="buttons">
 80 | 					<button type="submit" class="button  add-file">Добавить поле</button>
 81 | 					<button type="submit" class="button  disable-input">Переключить активность</button>
 82 | 				</div>
 83 | 				<input type="file" />
 84 | 			</div><!-- .section -->
 85 | 		</div><!-- .box -->
 86 | 
 87 | 		<div class="box">
 88 | 			<h2>Поле для ввода чисел</h2>
 89 | 
 90 | 			<div class="section">
 91 | 				<div class="buttons">
 92 | 					<button type="submit" class="button  add-number">Добавить поле</button>
 93 | 					<button type="submit" class="button  disable-input">Переключить активность</button>
 94 | 				</div>
 95 | 				<p>Поле без атрибутов.</p>
 96 | 				<input type="number" />
 97 | 			</div><!-- .section -->
 98 | 
 99 | 			<div class="section">
100 | 				<p>Поле с атрибутами <code>min="0" max="100" step="5"</code>.</p>
101 | 				<input type="number" min="0" max="100" step="5" />
102 | 			</div><!-- .section -->
103 | 
104 | 			<div class="section  number-plus-minus">
105 | 			<p>Другой вид переключателей.</p>
106 | 				<input type="number" />
107 | 			</div><!-- .section -->
108 | 		</div><!-- .box -->
109 | 
110 | 		<div class="box">
111 | 
112 | 			<h2>Одиночные селекты</h2>
113 | 
114 | 			<p style="color: #09C98C">По умолчанию ширина селекта на этой странице установлена 250 пикселей.</p>
115 | 
116 | 			<div class="section">
117 | 				<div class="buttons">
118 | 					<button type="submit" class="button  add-select">Добавить селект</button>
119 | 					<button type="submit" class="button  add-options">Добавить пункты в список</button>
120 | 					<button type="submit" class="button  disable-select">Переключить активность селекта</button>
121 | 					<button type="submit" class="button  disable-options">Переключить активность пунктов</button>
122 | 				</div>
123 | 				<p><strong>Простой селект</strong> с несколькими пунктами, <br />один из них неактивный.</p>
124 | 				<select>
125 | 					<option>-- Выберите --</option>
126 | 					<option>Пункт 1</option>
127 | 					<option>Пункт 2</option>
128 | 					<option disabled>Пункт 3</option>
129 | 					<option>Пункт 4</option>
130 | 					<option>Пункт 5</option>
131 | 				</select>
132 | 			</div><!-- .section -->
133 | 
134 | 			<div class="section">
135 | 
136 | 				<p>Селект <strong>без заданной ширины</strong>, имеющий пункт <strong>с длинным текстом</strong>.</p>
137 | 				<select class="width-auto">
138 | 					<option>-- Выберите --</option>
139 | 					<option>Пункт 1</option>
140 | 					<option>Пункт 2</option>
141 | 					<option>Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом</option>
142 | 					<option>Пункт 4</option>
143 | 					<option>Пункт 5</option>
144 | 				</select>
145 | 
146 | 				<br /><br />
147 | 
148 | 				<p>Селект <strong>с шириной 200 пикселей</strong>, имеющий пункт <strong>с длинным текстом</strong>.</p>
149 | 				<select class="width-200">
150 | 					<option>-- Выберите --</option>
151 | 					<option>Пункт 1</option>
152 | 					<option>Пункт 2</option>
153 | 					<option>Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом</option>
154 | 					<option>Пункт 4</option>
155 | 					<option>Пункт 5</option>
156 | 				</select>
157 | 
158 | 			</div><!-- .section -->
159 | 
160 | 			<div class="section">
161 | 
162 | 				<div class="sec maxheight">
163 | 					<p>Выпадающий список этого селекта <br /><strong>органичен по высоте</strong>.</p>
164 | 					<select>
165 | 						<option>-- Выберите --</option>
166 | 						<option>Пункт 1</option>
167 | 						<option>Пункт 2</option>
168 | 						<option>Пункт 3</option>
169 | 						<option>Пункт 4</option>
170 | 						<option>Пункт 5</option>
171 | 						<option>Пункт 6</option>
172 | 						<option>Пункт 7</option>
173 | 						<option>Пункт 8</option>
174 | 						<option>Пункт 9</option>
175 | 						<option>Пункт 10</option>
176 | 						<option>Пункт 11</option>
177 | 						<option>Пункт 12</option>
178 | 						<option>Пункт 13</option>
179 | 						<option>Пункт 14</option>
180 | 						<option>Пункт 15</option>
181 | 						<option>Пункт 16</option>
182 | 						<option>Пункт 17</option>
183 | 						<option>Пункт 18</option>
184 | 						<option>Пункт 19</option>
185 | 						<option>Пункт 20</option>
186 | 						<option>Пункт 21</option>
187 | 						<option>Пункт 22</option>
188 | 						<option>Пункт 23</option>
189 | 						<option>Пункт 24</option>
190 | 						<option>Пункт 25</option>
191 | 						<option>Пункт 26</option>
192 | 						<option>Пункт 27</option>
193 | 						<option>Пункт 28</option>
194 | 						<option>Пункт 29</option>
195 | 						<option>Пункт 30</option>
196 | 					</select>
197 | 				</div><!-- .sec -->
198 | 
199 | 				<div class="sec">
200 | 					<p>Селект <strong>с длинным списком</strong>, не ограниченным максимальной высотой.</p>
201 | 					<select>
202 | 						<option>-- Выберите --</option>
203 | 						<option>Пункт 1</option>
204 | 						<option>Пункт 2</option>
205 | 						<option>Пункт 3</option>
206 | 						<option>Пункт 4</option>
207 | 						<option>Пункт 5</option>
208 | 						<option>Пункт 6</option>
209 | 						<option>Пункт 7</option>
210 | 						<option>Пункт 8</option>
211 | 						<option>Пункт 9</option>
212 | 						<option>Пункт 10</option>
213 | 						<option>Пункт 11</option>
214 | 						<option>Пункт 12</option>
215 | 						<option>Пункт 13</option>
216 | 						<option>Пункт 14</option>
217 | 						<option>Пункт 15</option>
218 | 						<option>Пункт 16</option>
219 | 						<option>Пункт 17</option>
220 | 						<option>Пункт 18</option>
221 | 						<option>Пункт 19</option>
222 | 						<option>Пункт 20</option>
223 | 						<option>Пункт 21</option>
224 | 						<option>Пункт 22</option>
225 | 						<option>Пункт 23</option>
226 | 						<option>Пункт 24</option>
227 | 						<option>Пункт 25</option>
228 | 						<option>Пункт 26</option>
229 | 						<option>Пункт 27</option>
230 | 						<option>Пункт 28</option>
231 | 						<option>Пункт 29</option>
232 | 						<option>Пункт 30</option>
233 | 						<option>Пункт 31</option>
234 | 						<option>Пункт 32</option>
235 | 						<option>Пункт 33</option>
236 | 						<option>Пункт 34</option>
237 | 						<option>Пункт 35</option>
238 | 						<option>Пункт 36</option>
239 | 						<option>Пункт 37</option>
240 | 						<option>Пункт 38</option>
241 | 						<option>Пункт 39</option>
242 | 						<option>Пункт 40</option>
243 | 						<option>Пункт 41</option>
244 | 						<option>Пункт 42</option>
245 | 						<option>Пункт 43</option>
246 | 						<option>Пункт 44</option>
247 | 						<option>Пункт 45</option>
248 | 						<option>Пункт 46</option>
249 | 						<option>Пункт 47</option>
250 | 						<option>Пункт 48</option>
251 | 						<option>Пункт 49</option>
252 | 						<option>Пункт 50</option>
253 | 						<option>Пункт 51</option>
254 | 						<option>Пункт 52</option>
255 | 						<option>Пункт 53</option>
256 | 						<option>Пункт 54</option>
257 | 						<option>Пункт 55</option>
258 | 						<option>Пункт 56</option>
259 | 						<option>Пункт 57</option>
260 | 						<option>Пункт 58</option>
261 | 						<option>Пункт 59</option>
262 | 						<option>Пункт 60</option>
263 | 						<option>Пункт 61</option>
264 | 						<option>Пункт 62</option>
265 | 						<option>Пункт 63</option>
266 | 						<option>Пункт 64</option>
267 | 						<option>Пункт 65</option>
268 | 						<option>Пункт 66</option>
269 | 						<option>Пункт 67</option>
270 | 						<option>Пункт 68</option>
271 | 						<option>Пункт 69</option>
272 | 						<option>Пункт 70</option>
273 | 						<option>Пункт 71</option>
274 | 						<option>Пункт 72</option>
275 | 						<option>Пункт 73</option>
276 | 						<option>Пункт 74</option>
277 | 						<option>Пункт 75</option>
278 | 						<option>Пункт 76</option>
279 | 						<option>Пункт 77</option>
280 | 						<option>Пункт 78</option>
281 | 						<option>Пункт 79</option>
282 | 						<option>Пункт 80</option>
283 | 						<option>Пункт 81</option>
284 | 						<option>Пункт 82</option>
285 | 						<option>Пункт 83</option>
286 | 						<option>Пункт 84</option>
287 | 						<option>Пункт 85</option>
288 | 						<option>Пункт 86</option>
289 | 						<option>Пункт 87</option>
290 | 						<option>Пункт 88</option>
291 | 						<option>Пункт 89</option>
292 | 						<option>Пункт 90</option>
293 | 						<option>Пункт 91</option>
294 | 						<option>Пункт 92</option>
295 | 						<option>Пункт 93</option>
296 | 						<option>Пункт 94</option>
297 | 						<option>Пункт 95</option>
298 | 						<option>Пункт 96</option>
299 | 						<option>Пункт 97</option>
300 | 						<option>Пункт 98</option>
301 | 						<option>Пункт 99</option>
302 | 						<option>Пункт 100</option>
303 | 					</select>
304 | 				</div><!-- .sec -->
305 | 
306 | 			</div><!-- .section -->
307 | 
308 | 			<div class="section">
309 | 
310 | 				<div class="sec">
311 | 					<p>Проверяем, правильное ли значение передается при изменении. У оригинального селекта прописано: <code>onchange="alert(this.value)"</code>.</p>
312 | 					<select onchange="alert(this.value)">
313 | 						<option>-- Выберите --</option>
314 | 						<option>Пункт 1</option>
315 | 						<option>Пункт 2</option>
316 | 						<option>Пункт 3</option>
317 | 						<option>Пункт 4</option>
318 | 						<option>Пункт 5</option>
319 | 					</select>
320 | 				</div><!-- .sec -->
321 | 
322 | 				<div class="sec">
323 | 					<p>Селект <strong>с замещающим текстом</strong> (placeholder). Текст "-- Выберите --" задан не через тег <code>option</code>, а через атрибут <code>data-placeholder</code>.</p>
324 | 					<select data-placeholder="-- Выберите --">
325 | 						<option></option>
326 | 						<option>Пункт 1</option>
327 | 						<option>Пункт 2</option>
328 | 						<option>Пункт 3</option>
329 | 						<option>Пункт 4</option>
330 | 						<option>Пункт 5</option>
331 | 					</select>
332 | 				</div><!-- .sec -->
333 | 
334 | 			</div><!-- .section -->
335 | 
336 | 			<div class="section">
337 | 
338 | 				<div class="sec">
339 | 					<p>Селект <strong>с группировкой пунктов</strong> <br />(используется тег <code>optgroup</code>), один из них неактивный.</p>
340 | 					<select>
341 | 						<option>-- Выберите --</option>
342 | 						<optgroup label="Группа 1">
343 | 							<option>Пункт 1.1</option>
344 | 							<option>Пункт 1.2</option>
345 | 							<option>Пункт 1.3</option>
346 | 						</optgroup>
347 | 						<optgroup label="Группа 2">
348 | 							<option>Пункт 2.1</option>
349 | 							<option disabled>Пункт 2.2</option>
350 | 							<option>Пункт 2.3</option>
351 | 						</optgroup>
352 | 					</select>
353 | 				</div><!-- .sec -->
354 | 
355 | 				<div class="sec">
356 | 					<p>Селект с выделением групп <strong>разными цветами</strong> (указаны классы <code>.color1</code> и <code>.color2</code> для <code>optgroup</code>).</p>
357 | 					<select>
358 | 						<option>-- Выберите --</option>
359 | 						<optgroup label="Группа 1" class="color1">
360 | 							<option>Пункт 1.1</option>
361 | 							<option>Пункт 1.2</option>
362 | 							<option>Пункт 1.3</option>
363 | 						</optgroup>
364 | 						<optgroup label="Группа 2" class="color2">
365 | 							<option>Пункт 2.1</option>
366 | 							<option>Пункт 2.2</option>
367 | 							<option>Пункт 2.3</option>
368 | 						</optgroup>
369 | 					</select>
370 | 				</div><!-- .sec -->
371 | 
372 | 			</div><!-- .section -->
373 | 
374 | 			<div class="section">
375 | 
376 | 				<div class="sec showChanged">
377 | 					<p>Показываем, что селект изменен, используя класс <code>.changed</code> (появляется зеленая обводка).</p>
378 | 					<select>
379 | 						<option>-- Выберите --</option>
380 | 						<option>Пункт 1</option>
381 | 						<option>Пункт 2</option>
382 | 						<option>Пункт 3</option>
383 | 						<option>Пункт 4</option>
384 | 						<option>Пункт 5</option>
385 | 					</select>
386 | 				</div><!-- .sec -->
387 | 
388 | 				<div class="sec lang">
389 | 					<p>Класс, указаннный для <code>option</code>, передается свернутом селекту, благодаря чему мы в нем видим флаг.</p>
390 | 					<select>
391 | 						<option>-- Выберите язык --</option>
392 | 						<option class="lang-en">Английский</option>
393 | 						<option class="lang-es">Испанский</option>
394 | 						<option class="lang-de">Немецкий</option>
395 | 						<option class="lang-ru">Русский</option>
396 | 						<option class="lang-fr">Французский</option>
397 | 					</select>
398 | 				</div><!-- .sec -->
399 | 
400 | 			</div><!-- .section -->
401 | 
402 | 			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
403 | 
404 | 		</div><!-- .box -->
405 | 
406 | 		<div class="box">
407 | 
408 | 			<h2>Мультиселекты</h2>
409 | 
410 | 			<div class="section">
411 | 				<div class="buttons">
412 | 					<button type="submit" class="button  add-select  multiple">Добавить селект</button>
413 | 					<button type="submit" class="button  add-options">Добавить пункты в список</button>
414 | 					<button type="submit" class="button  disable-select">Переключить активность селекта</button>
415 | 					<button type="submit" class="button  disable-options">Переключить активность пунктов</button>
416 | 				</div>
417 | 				<p><strong>Мультиселект</strong>, один из пунктов неактивный, <br />параметр <code>size</code> не указан.</p>
418 | 				<select multiple>
419 | 					<option>-- Выберите --</option>
420 | 					<option>Пункт 1</option>
421 | 					<option>Пункт 2</option>
422 | 					<option disabled>Пункт 3</option>
423 | 					<option>Пункт 4</option>
424 | 					<option>Пункт 5</option>
425 | 				</select>
426 | 			</div><!-- .section -->
427 | 
428 | 			<div class="section">
429 | 				<p>Мультиселект <strong>с параметром</strong> <code>size</code> <strong>равным</strong> <code>6</code> и <strong>с заданной шириной</strong> (400 пикселей).</p>
430 | 				<select multiple size="6" class="width-400">
431 | 					<option>-- Выберите один или несколько пунктов --</option>
432 | 					<option>Пункт 1</option>
433 | 					<option>Пункт 2</option>
434 | 					<option>Пункт 3</option>
435 | 					<option>Пункт 4</option>
436 | 					<option>Пункт 5</option>
437 | 				</select>
438 | 			</div><!-- .section -->
439 | 
440 | 			<div class="section">
441 | 
442 | 				<div class="sec">
443 | 					<p>Мультиселект <strong>с группировкой пунктов</strong> (используется тег <code>optgroup</code>), один из них неактивный.</p>
444 | 					<select multiple size="9">
445 | 						<option>-- Выберите --</option>
446 | 						<optgroup label="Группа 1">
447 | 							<option>Пункт 1.1</option>
448 | 							<option>Пункт 1.2</option>
449 | 							<option>Пункт 1.3</option>
450 | 						</optgroup>
451 | 						<optgroup label="Группа 2">
452 | 							<option>Пункт 2.1</option>
453 | 							<option disabled>Пункт 2.2</option>
454 | 							<option>Пункт 2.3</option>
455 | 						</optgroup>
456 | 					</select>
457 | 				</div><!-- .sec -->
458 | 
459 | 				<div class="sec">
460 | 					<p>Мультиселект с выделением групп <strong>разными цветами</strong> (указаны классы <code>.color1</code> и <code>.color2</code> для <code>optgroup</code>).</p>
461 | 					<select multiple size="9">
462 | 						<option>-- Выберите --</option>
463 | 						<optgroup label="Группа 1" class="color1">
464 | 							<option>Пункт 1.1</option>
465 | 							<option>Пункт 1.2</option>
466 | 							<option>Пункт 1.3</option>
467 | 						</optgroup>
468 | 						<optgroup label="Группа 2" class="color2">
469 | 							<option>Пункт 2.1</option>
470 | 							<option>Пункт 2.2</option>
471 | 							<option>Пункт 2.3</option>
472 | 						</optgroup>
473 | 					</select>
474 | 				</div><!-- .sec -->
475 | 
476 | 			</div><!-- .section -->
477 | 
478 | 		</div><!-- .box -->
479 | 
480 | 		<div class="box">
481 | 
482 | 			<h2>Прочие элементы форм (только CSS)</h2>
483 | 
484 | 			<div class="section css">
485 | 				<p>Стилизация данных элементов <strong>не требует наличия плагина</strong>.</p>
486 | 
487 | 				<input class="styler" type="text" size="60" placeholder="Однострочное текстовое поле..." /> <code>&lt;input type="text"></code>
488 | 
489 | 				<input class="styler" type="password" size="60" placeholder="Поле для ввода пароля..." /> <code>&lt;input type="password"></code>
490 | 
491 | 				<textarea class="styler" cols="60" rows="5" placeholder="Многострочное текстовое поле..."></textarea> <code>&lt;textarea>&lt;/textarea></code><br />
492 | 
493 | 				<input class="styler" type="button" value="Кнопка" /> <code>&lt;input type="button"></code><br />
494 | 
495 | 				<button class="styler" type="submit">Кнопка</button> <code>&lt;button>&lt;/button></code><br />
496 | 
497 | 				<input class="styler" type="reset" value="Сброс" /> <code>&lt;input type="reset"></code><br />
498 | 
499 | 				<input class="styler" type="button" value="Кнопка неактивная" disabled /> <code>&lt;input type="button" disabled></code><br />
500 | 				<button class="styler" type="submit" disabled>Кнопка неактивная</button> <code>&lt;button disabled>&lt;/button></code>
501 | 
502 | 			</div><!-- .section -->
503 | 
504 | 		</div><!-- .box -->
505 | 
506 | 	</div><!-- .content -->
507 | 
508 | </div><!-- .wrapper -->
509 | 
510 | </body>
511 | </html>


--------------------------------------------------------------------------------
/dist/jquery.formstyler.css:
--------------------------------------------------------------------------------
  1 | .jq-checkbox,
  2 | .jq-radio {
  3 | 	position: relative;
  4 | 	display: inline-block;
  5 | 	overflow: hidden;
  6 | 	-webkit-user-select: none;
  7 | 	-moz-user-select: none;
  8 | 	-ms-user-select: none;
  9 | 	user-select: none;
 10 | }
 11 | .jq-checkbox input,
 12 | .jq-radio input {
 13 | 	position: absolute;
 14 | 	z-index: -1;
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	opacity: 0;
 18 | }
 19 | .jq-file {
 20 | 	position: relative;
 21 | 	display: inline-block;
 22 | 	overflow: hidden;
 23 | }
 24 | .jq-file input {
 25 | 	position: absolute;
 26 | 	top: 0;
 27 | 	right: 0;
 28 | 	height: auto;
 29 | 	margin: 0;
 30 | 	padding: 0;
 31 | 	opacity: 0;
 32 | 	font-size: 100px;
 33 | 	line-height: 1em;
 34 | }
 35 | .jq-file__name {
 36 | 	overflow: hidden;
 37 | 	white-space: nowrap;
 38 | 	text-overflow: ellipsis;
 39 | }
 40 | .jq-selectbox,
 41 | .jq-select-multiple {
 42 | 	position: relative;
 43 | 	display: inline-block;
 44 | }
 45 | .jq-selectbox select,
 46 | .jq-select-multiple select {
 47 | 	position: absolute;
 48 | 	top: 0;
 49 | 	left: 0;
 50 | 	width: 100%;
 51 | 	height: 100%;
 52 | 	margin: 0;
 53 | 	padding: 0;
 54 | 	opacity: 0;
 55 | }
 56 | .jq-selectbox li,
 57 | .jq-select-multiple li {
 58 | 	-webkit-user-select: none;
 59 | 	-moz-user-select: none;
 60 | 	-ms-user-select: none;
 61 | 	user-select: none;
 62 | 	white-space: nowrap;
 63 | }
 64 | .jq-selectbox {
 65 | 	z-index: 10;
 66 | }
 67 | .jq-selectbox__select {
 68 | 	position: relative;
 69 | }
 70 | .jq-selectbox__select-text {
 71 | 	overflow: hidden;
 72 | 	-webkit-user-select: none;
 73 | 	-moz-user-select: none;
 74 | 	-ms-user-select: none;
 75 | 	user-select: none;
 76 | 	white-space: nowrap;
 77 | 	text-overflow: ellipsis;
 78 | }
 79 | .jq-selectbox__dropdown {
 80 | 	position: absolute;
 81 | }
 82 | .jq-selectbox__search input {
 83 | 	-webkit-appearance: textfield;
 84 | }
 85 | .jq-selectbox__search input::-webkit-search-cancel-button,
 86 | .jq-selectbox__search input::-webkit-search-decoration {
 87 | 	-webkit-appearance: none;
 88 | }
 89 | .jq-selectbox__dropdown ul {
 90 | 	position: relative;
 91 | 	overflow: auto;
 92 | 	overflow-x: hidden;
 93 | 	list-style: none;
 94 | 	-webkit-overflow-scrolling: touch;
 95 | }
 96 | .jq-select-multiple ul {
 97 | 	position: relative;
 98 | 	overflow-x: hidden;
 99 | 	-webkit-overflow-scrolling: touch;
100 | }
101 | .jq-number {
102 | 	display: inline-block;
103 | }
104 | .jq-number__field input {
105 | 	-moz-appearance: textfield;
106 | 	text-align: left; /* для Opera Presto */
107 | }
108 | .jq-number__field input::-webkit-inner-spin-button,
109 | .jq-number__field input::-webkit-outer-spin-button {
110 | 	margin: 0; /* в каких-то браузерах присутствует отступ */
111 | 	-webkit-appearance: none;
112 | }


--------------------------------------------------------------------------------
/dist/jquery.formstyler.js:
--------------------------------------------------------------------------------
   1 | /*
   2 |  * jQuery Form Styler v2.0.2
   3 |  * https://github.com/Dimox/jQueryFormStyler
   4 |  *
   5 |  * Copyright 2012-2017 Dimox (http://dimox.name/)
   6 |  * Released under the MIT license.
   7 |  *
   8 |  * Date: 2017.10.22
   9 |  *
  10 |  */
  11 | 
  12 | ;(function(factory) {
  13 | 	if (typeof define === 'function' && define.amd) {
  14 | 		// AMD
  15 | 		define(['jquery'], factory);
  16 | 	} else if (typeof exports === 'object') {
  17 | 		// CommonJS
  18 | 		module.exports = factory($ || require('jquery'));
  19 | 	} else {
  20 | 		factory(jQuery);
  21 | 	}
  22 | }(function($) {
  23 | 
  24 | 	'use strict';
  25 | 
  26 | 	var pluginName = 'styler',
  27 | 			defaults = {
  28 | 				idSuffix: '-styler',
  29 | 				filePlaceholder: 'Файл не выбран',
  30 | 				fileBrowse: 'Обзор...',
  31 | 				fileNumber: 'Выбрано файлов: %s',
  32 | 				selectPlaceholder: 'Выберите...',
  33 | 				selectSearch: false,
  34 | 				selectSearchLimit: 10,
  35 | 				selectSearchNotFound: 'Совпадений не найдено',
  36 | 				selectSearchPlaceholder: 'Поиск...',
  37 | 				selectVisibleOptions: 0,
  38 | 				selectSmartPositioning: true,
  39 | 				locale: 'ru',
  40 | 				locales: {
  41 | 					'en': {
  42 | 						filePlaceholder: 'No file selected',
  43 | 						fileBrowse: 'Browse...',
  44 | 						fileNumber: 'Selected files: %s',
  45 | 						selectPlaceholder: 'Select...',
  46 | 						selectSearchNotFound: 'No matches found',
  47 | 						selectSearchPlaceholder: 'Search...'
  48 | 					}
  49 | 				},
  50 | 				onSelectOpened: function() {},
  51 | 				onSelectClosed: function() {},
  52 | 				onFormStyled: function() {}
  53 | 			};
  54 | 
  55 | 	function Plugin(element, options) {
  56 | 		this.element = element;
  57 | 		this.options = $.extend({}, defaults, options);
  58 | 		var locale = this.options.locale;
  59 | 		if (this.options.locales[locale] !== undefined) {
  60 | 			$.extend(this.options, this.options.locales[locale]);
  61 | 		}
  62 | 		this.init();
  63 | 	}
  64 | 
  65 | 	Plugin.prototype = {
  66 | 
  67 | 		// инициализация
  68 | 		init: function() {
  69 | 
  70 | 			var el = $(this.element);
  71 | 			var opt = this.options;
  72 | 
  73 | 			var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;
  74 | 			var Android = (navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;
  75 | 
  76 | 			function Attributes() {
  77 | 				if (el.attr('id') !== undefined && el.attr('id') !== '') {
  78 | 					this.id = el.attr('id') + opt.idSuffix;
  79 | 				}
  80 | 				this.title = el.attr('title');
  81 | 				this.classes = el.attr('class');
  82 | 				this.data = el.data();
  83 | 			}
  84 | 
  85 | 			// checkbox
  86 | 			if (el.is(':checkbox')) {
  87 | 
  88 | 				var checkboxOutput = function() {
  89 | 
  90 | 					var att = new Attributes();
  91 | 					var checkbox = $('<div class="jq-checkbox"><div class="jq-checkbox__div"></div></div>')
  92 | 						.attr({
  93 | 							id: att.id,
  94 | 							title: att.title
  95 | 						})
  96 | 						.addClass(att.classes)
  97 | 						.data(att.data)
  98 | 					;
  99 | 
 100 | 					el.after(checkbox).prependTo(checkbox);
 101 | 					if (el.is(':checked')) checkbox.addClass('checked');
 102 | 					if (el.is(':disabled')) checkbox.addClass('disabled');
 103 | 
 104 | 					// клик на псевдочекбокс
 105 | 					checkbox.click(function(e) {
 106 | 						e.preventDefault();
 107 | 						el.triggerHandler('click');
 108 | 						if (!checkbox.is('.disabled')) {
 109 | 							if (el.is(':checked')) {
 110 | 								el.prop('checked', false);
 111 | 								checkbox.removeClass('checked');
 112 | 							} else {
 113 | 								el.prop('checked', true);
 114 | 								checkbox.addClass('checked');
 115 | 							}
 116 | 							el.focus().change();
 117 | 						}
 118 | 					});
 119 | 					// клик на label
 120 | 					el.closest('label').add('label[for="' + el.attr('id') + '"]').on('click.styler', function(e) {
 121 | 						if (!$(e.target).is('a') && !$(e.target).closest(checkbox).length) {
 122 | 							checkbox.triggerHandler('click');
 123 | 							e.preventDefault();
 124 | 						}
 125 | 					});
 126 | 					// переключение по Space или Enter
 127 | 					el.on('change.styler', function() {
 128 | 						if (el.is(':checked')) checkbox.addClass('checked');
 129 | 						else checkbox.removeClass('checked');
 130 | 					})
 131 | 					// чтобы переключался чекбокс, который находится в теге label
 132 | 					.on('keydown.styler', function(e) {
 133 | 						if (e.which == 32) checkbox.click();
 134 | 					})
 135 | 					.on('focus.styler', function() {
 136 | 						if (!checkbox.is('.disabled')) checkbox.addClass('focused');
 137 | 					})
 138 | 					.on('blur.styler', function() {
 139 | 						checkbox.removeClass('focused');
 140 | 					});
 141 | 
 142 | 				}; // end checkboxOutput()
 143 | 
 144 | 				checkboxOutput();
 145 | 
 146 | 				// обновление при динамическом изменении
 147 | 				el.on('refresh', function() {
 148 | 					el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
 149 | 					el.off('.styler').parent().before(el).remove();
 150 | 					checkboxOutput();
 151 | 				});
 152 | 
 153 | 			// end checkbox
 154 | 
 155 | 			// radio
 156 | 			} else if (el.is(':radio')) {
 157 | 
 158 | 				var radioOutput = function() {
 159 | 
 160 | 					var att = new Attributes();
 161 | 					var radio = $('<div class="jq-radio"><div class="jq-radio__div"></div></div>')
 162 | 						.attr({
 163 | 							id: att.id,
 164 | 							title: att.title
 165 | 						})
 166 | 						.addClass(att.classes)
 167 | 						.data(att.data)
 168 | 					;
 169 | 
 170 | 					el.after(radio).prependTo(radio);
 171 | 					if (el.is(':checked')) radio.addClass('checked');
 172 | 					if (el.is(':disabled')) radio.addClass('disabled');
 173 | 
 174 | 					// определяем общего родителя у радиокнопок с одинаковым name
 175 | 					// http://stackoverflow.com/a/27733847
 176 | 					$.fn.commonParents = function() {
 177 | 						var cachedThis = this;
 178 | 						return cachedThis.first().parents().filter(function() {
 179 | 							return $(this).find(cachedThis).length === cachedThis.length;
 180 | 						});
 181 | 					};
 182 | 					$.fn.commonParent = function() {
 183 | 						return $(this).commonParents().first();
 184 | 					};
 185 | 
 186 | 					// клик на псевдорадиокнопке
 187 | 					radio.click(function(e) {
 188 | 						e.preventDefault();
 189 | 						el.triggerHandler('click');
 190 | 						if (!radio.is('.disabled')) {
 191 | 							var inputName = $('input[name="' + el.attr('name') + '"]');
 192 | 							inputName.commonParent().find(inputName).prop('checked', false).parent().removeClass('checked');
 193 | 							el.prop('checked', true).parent().addClass('checked');
 194 | 							el.focus().change();
 195 | 						}
 196 | 					});
 197 | 					// клик на label
 198 | 					el.closest('label').add('label[for="' + el.attr('id') + '"]').on('click.styler', function(e) {
 199 | 						if (!$(e.target).is('a') && !$(e.target).closest(radio).length) {
 200 | 							radio.triggerHandler('click');
 201 | 							e.preventDefault();
 202 | 						}
 203 | 					});
 204 | 					// переключение стрелками
 205 | 					el.on('change.styler', function() {
 206 | 						el.parent().addClass('checked');
 207 | 					})
 208 | 					.on('focus.styler', function() {
 209 | 						if (!radio.is('.disabled')) radio.addClass('focused');
 210 | 					})
 211 | 					.on('blur.styler', function() {
 212 | 						radio.removeClass('focused');
 213 | 					});
 214 | 
 215 | 				}; // end radioOutput()
 216 | 
 217 | 				radioOutput();
 218 | 
 219 | 				// обновление при динамическом изменении
 220 | 				el.on('refresh', function() {
 221 | 					el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
 222 | 					el.off('.styler').parent().before(el).remove();
 223 | 					radioOutput();
 224 | 				});
 225 | 
 226 | 			// end radio
 227 | 
 228 | 			// file
 229 | 			} else if (el.is(':file')) {
 230 | 
 231 | 				var fileOutput = function() {
 232 | 
 233 | 					var att = new Attributes();
 234 | 					var placeholder = el.data('placeholder');
 235 | 					if (placeholder === undefined) placeholder = opt.filePlaceholder;
 236 | 					var browse = el.data('browse');
 237 | 					if (browse === undefined || browse === '') browse = opt.fileBrowse;
 238 | 
 239 | 					var file =
 240 | 						$('<div class="jq-file">' +
 241 | 								'<div class="jq-file__name">' + placeholder + '</div>' +
 242 | 								'<div class="jq-file__browse">' + browse + '</div>' +
 243 | 							'</div>')
 244 | 						.attr({
 245 | 							id: att.id,
 246 | 							title: att.title
 247 | 						})
 248 | 						.addClass(att.classes)
 249 | 						.data(att.data)
 250 | 					;
 251 | 
 252 | 					el.after(file).appendTo(file);
 253 | 					if (el.is(':disabled')) file.addClass('disabled');
 254 | 
 255 | 					var value = el.val();
 256 | 					var name = $('div.jq-file__name', file);
 257 | 
 258 | 					// чтобы при динамическом изменении имя файла не сбрасывалось
 259 | 					if (value) name.text(value.replace(/.+[\\\/]/, ''));
 260 | 
 261 | 					el.on('change.styler', function() {
 262 | 						var value = el.val();
 263 | 						if (el.is('[multiple]')) {
 264 | 							value = '';
 265 | 							var files = el[0].files.length;
 266 | 							if (files > 0) {
 267 | 								var number = el.data('number');
 268 | 								if (number === undefined) number = opt.fileNumber;
 269 | 								number = number.replace('%s', files);
 270 | 								value = number;
 271 | 							}
 272 | 						}
 273 | 						name.text(value.replace(/.+[\\\/]/, ''));
 274 | 						if (value === '') {
 275 | 							name.text(placeholder);
 276 | 							file.removeClass('changed');
 277 | 						} else {
 278 | 							file.addClass('changed');
 279 | 						}
 280 | 					})
 281 | 					.on('focus.styler', function() {
 282 | 						file.addClass('focused');
 283 | 					})
 284 | 					.on('blur.styler', function() {
 285 | 						file.removeClass('focused');
 286 | 					})
 287 | 					.on('click.styler', function() {
 288 | 						file.removeClass('focused');
 289 | 					});
 290 | 
 291 | 				}; // end fileOutput()
 292 | 
 293 | 				fileOutput();
 294 | 
 295 | 				// обновление при динамическом изменении
 296 | 				el.on('refresh', function() {
 297 | 					el.off('.styler').parent().before(el).remove();
 298 | 					fileOutput();
 299 | 				});
 300 | 
 301 | 			// end file
 302 | 
 303 | 			// number
 304 | 			} else if (el.is('input[type="number"]')) {
 305 | 
 306 | 				var numberOutput = function() {
 307 | 
 308 | 					var att = new Attributes();
 309 | 					var number =
 310 | 						$('<div class="jq-number">' +
 311 | 								'<div class="jq-number__spin minus"></div>' +
 312 | 								'<div class="jq-number__spin plus"></div>' +
 313 | 							'</div>')
 314 | 						.attr({
 315 | 							id: att.id,
 316 | 							title: att.title
 317 | 						})
 318 | 						.addClass(att.classes)
 319 | 						.data(att.data)
 320 | 					;
 321 | 
 322 | 					el.after(number).prependTo(number).wrap('<div class="jq-number__field"></div>');
 323 | 					if (el.is(':disabled')) number.addClass('disabled');
 324 | 
 325 | 					var min,
 326 | 							max,
 327 | 							step,
 328 | 							timeout = null,
 329 | 							interval = null;
 330 | 					if (el.attr('min') !== undefined) min = el.attr('min');
 331 | 					if (el.attr('max') !== undefined) max = el.attr('max');
 332 | 					if (el.attr('step') !== undefined && $.isNumeric(el.attr('step')))
 333 | 						step = Number(el.attr('step'));
 334 | 					else
 335 | 						step = Number(1);
 336 | 
 337 | 					var changeValue = function(spin) {
 338 | 						var value = el.val(),
 339 | 								newValue;
 340 | 
 341 | 						if (!$.isNumeric(value)) {
 342 | 							value = 0;
 343 | 							el.val('0');
 344 | 						}
 345 | 
 346 | 						if (spin.is('.minus')) {
 347 | 							newValue = Number(value) - step;
 348 | 						} else if (spin.is('.plus')) {
 349 | 							newValue = Number(value) + step;
 350 | 						}
 351 | 
 352 | 						// определяем количество десятичных знаков после запятой в step
 353 | 						var decimals = (step.toString().split('.')[1] || []).length;
 354 | 						if (decimals > 0) {
 355 | 							var multiplier = '1';
 356 | 							while (multiplier.length <= decimals) multiplier = multiplier + '0';
 357 | 							// избегаем появления лишних знаков после запятой
 358 | 							newValue = Math.round(newValue * multiplier) / multiplier;
 359 | 						}
 360 | 
 361 | 						if ($.isNumeric(min) && $.isNumeric(max)) {
 362 | 							if (newValue >= min && newValue <= max) el.val(newValue);
 363 | 						} else if ($.isNumeric(min) && !$.isNumeric(max)) {
 364 | 							if (newValue >= min) el.val(newValue);
 365 | 						} else if (!$.isNumeric(min) && $.isNumeric(max)) {
 366 | 							if (newValue <= max) el.val(newValue);
 367 | 						} else {
 368 | 							el.val(newValue);
 369 | 						}
 370 | 					};
 371 | 
 372 | 					if (!number.is('.disabled')) {
 373 | 						number.on('mousedown', 'div.jq-number__spin', function() {
 374 | 							var spin = $(this);
 375 | 							changeValue(spin);
 376 | 							timeout = setTimeout(function(){
 377 | 								interval = setInterval(function(){ changeValue(spin); }, 40);
 378 | 							}, 350);
 379 | 						}).on('mouseup mouseout', 'div.jq-number__spin', function() {
 380 | 							clearTimeout(timeout);
 381 | 							clearInterval(interval);
 382 | 						}).on('mouseup', 'div.jq-number__spin', function() {
 383 | 							el.change().trigger('input');
 384 | 						});
 385 | 						el.on('focus.styler', function() {
 386 | 							number.addClass('focused');
 387 | 						})
 388 | 						.on('blur.styler', function() {
 389 | 							number.removeClass('focused');
 390 | 						});
 391 | 					}
 392 | 
 393 | 				}; // end numberOutput()
 394 | 
 395 | 				numberOutput();
 396 | 
 397 | 				// обновление при динамическом изменении
 398 | 				el.on('refresh', function() {
 399 | 					el.off('.styler').closest('.jq-number').before(el).remove();
 400 | 					numberOutput();
 401 | 				});
 402 | 
 403 | 			// end number
 404 | 
 405 | 			// select
 406 | 			} else if (el.is('select')) {
 407 | 
 408 | 				var selectboxOutput = function() {
 409 | 
 410 | 					// запрещаем прокрутку страницы при прокрутке селекта
 411 | 					function preventScrolling(selector) {
 412 | 
 413 | 						var scrollDiff = selector.prop('scrollHeight') - selector.outerHeight(),
 414 | 								wheelDelta = null,
 415 | 								scrollTop = null;
 416 | 
 417 | 						selector.off('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(e) {
 418 | 
 419 | 							/**
 420 | 							 * нормализация направления прокрутки
 421 | 							 * (firefox < 0 || chrome etc... > 0)
 422 | 							 * (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0)
 423 | 							 */
 424 | 							wheelDelta = (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) ? 1 : -1; // направление прокрутки (-1 вниз, 1 вверх)
 425 | 							scrollTop = selector.scrollTop(); // позиция скролла
 426 | 
 427 | 							if ((scrollTop >= scrollDiff && wheelDelta < 0) || (scrollTop <= 0 && wheelDelta > 0)) {
 428 | 								e.stopPropagation();
 429 | 								e.preventDefault();
 430 | 							}
 431 | 
 432 | 						});
 433 | 					}
 434 | 
 435 | 					var option = $('option', el);
 436 | 					var list = '';
 437 | 					// формируем список селекта
 438 | 					function makeList() {
 439 | 						for (var i = 0; i < option.length; i++) {
 440 | 							var op = option.eq(i);
 441 | 							var li = '',
 442 | 									liClass = '',
 443 | 									liClasses = '',
 444 | 									id = '',
 445 | 									title = '',
 446 | 									dataList = '',
 447 | 									optionClass = '',
 448 | 									optgroupClass = '',
 449 | 									dataJqfsClass = '';
 450 | 							var disabled = 'disabled';
 451 | 							var selDis = 'selected sel disabled';
 452 | 							if (op.prop('selected')) liClass = 'selected sel';
 453 | 							if (op.is(':disabled')) liClass = disabled;
 454 | 							if (op.is(':selected:disabled')) liClass = selDis;
 455 | 							if (op.attr('id') !== undefined && op.attr('id') !== '') id = ' id="' + op.attr('id') + opt.idSuffix + '"';
 456 | 							if (op.attr('title') !== undefined && option.attr('title') !== '') title = ' title="' + op.attr('title') + '"';
 457 | 							if (op.attr('class') !== undefined) {
 458 | 								optionClass = ' ' + op.attr('class');
 459 | 								dataJqfsClass = ' data-jqfs-class="' + op.attr('class') + '"';
 460 | 							}
 461 | 
 462 | 							var data = op.data();
 463 | 							for (var k in data) {
 464 | 								if (data[k] !== '') dataList += ' data-' + k + '="' + data[k] + '"';
 465 | 							}
 466 | 
 467 | 							if ( (liClass + optionClass) !== '' )   liClasses = ' class="' + liClass + optionClass + '"';
 468 | 							li = '<li' + dataJqfsClass + dataList + liClasses + title + id + '>'+ op.html() +'</li>';
 469 | 
 470 | 							// если есть optgroup
 471 | 							if (op.parent().is('optgroup')) {
 472 | 								if (op.parent().attr('class') !== undefined) optgroupClass = ' ' + op.parent().attr('class');
 473 | 								li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + ' option' + optgroupClass + '"' + title + id + '>'+ op.html() +'</li>';
 474 | 								if (op.is(':first-child')) {
 475 | 									li = '<li class="optgroup' + optgroupClass + '">' + op.parent().attr('label') + '</li>' + li;
 476 | 								}
 477 | 							}
 478 | 
 479 | 							list += li;
 480 | 						}
 481 | 					} // end makeList()
 482 | 
 483 | 					// одиночный селект
 484 | 					function doSelect() {
 485 | 
 486 | 						var att = new Attributes();
 487 | 						var searchHTML = '';
 488 | 						var selectPlaceholder = el.data('placeholder');
 489 | 						var selectSearch = el.data('search');
 490 | 						var selectSearchLimit = el.data('search-limit');
 491 | 						var selectSearchNotFound = el.data('search-not-found');
 492 | 						var selectSearchPlaceholder = el.data('search-placeholder');
 493 | 						var selectSmartPositioning = el.data('smart-positioning');
 494 | 
 495 | 						if (selectPlaceholder === undefined) selectPlaceholder = opt.selectPlaceholder;
 496 | 						if (selectSearch === undefined || selectSearch === '') selectSearch = opt.selectSearch;
 497 | 						if (selectSearchLimit === undefined || selectSearchLimit === '') selectSearchLimit = opt.selectSearchLimit;
 498 | 						if (selectSearchNotFound === undefined || selectSearchNotFound === '') selectSearchNotFound = opt.selectSearchNotFound;
 499 | 						if (selectSearchPlaceholder === undefined) selectSearchPlaceholder = opt.selectSearchPlaceholder;
 500 | 						if (selectSmartPositioning === undefined || selectSmartPositioning === '') selectSmartPositioning = opt.selectSmartPositioning;
 501 | 
 502 | 						var selectbox =
 503 | 							$('<div class="jq-selectbox jqselect">' +
 504 | 									'<div class="jq-selectbox__select">' +
 505 | 										'<div class="jq-selectbox__select-text"></div>' +
 506 | 										'<div class="jq-selectbox__trigger">' +
 507 | 											'<div class="jq-selectbox__trigger-arrow"></div></div>' +
 508 | 									'</div>' +
 509 | 								'</div>')
 510 | 							.attr({
 511 | 								id: att.id,
 512 | 								title: att.title
 513 | 							})
 514 | 							.addClass(att.classes)
 515 | 							.data(att.data)
 516 | 						;
 517 | 
 518 | 						el.after(selectbox).prependTo(selectbox);
 519 | 
 520 | 						var selectzIndex = selectbox.css('z-index');
 521 | 						selectzIndex = (selectzIndex > 0 ) ? selectzIndex : 1;
 522 | 						var divSelect = $('div.jq-selectbox__select', selectbox);
 523 | 						var divText = $('div.jq-selectbox__select-text', selectbox);
 524 | 						var optionSelected = option.filter(':selected');
 525 | 
 526 | 						makeList();
 527 | 
 528 | 						if (selectSearch) searchHTML =
 529 | 							'<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="' + selectSearchPlaceholder + '"></div>' +
 530 | 							'<div class="jq-selectbox__not-found">' + selectSearchNotFound + '</div>';
 531 | 						var dropdown =
 532 | 							$('<div class="jq-selectbox__dropdown">' +
 533 | 									searchHTML + '<ul>' + list + '</ul>' +
 534 | 								'</div>');
 535 | 						selectbox.append(dropdown);
 536 | 						var ul = $('ul', dropdown);
 537 | 						var li = $('li', dropdown);
 538 | 						var search = $('input', dropdown);
 539 | 						var notFound = $('div.jq-selectbox__not-found', dropdown).hide();
 540 | 						if (li.length < selectSearchLimit) search.parent().hide();
 541 | 
 542 | 						// показываем опцию по умолчанию
 543 | 						// если у 1-й опции нет текста, она выбрана по умолчанию и параметр selectPlaceholder не false, то показываем плейсхолдер
 544 | 						if (option.first().text() === '' && option.first().is(':selected') && selectPlaceholder !== false) {
 545 | 							divText.text(selectPlaceholder).addClass('placeholder');
 546 | 						} else {
 547 | 							divText.text(optionSelected.text());
 548 | 						}
 549 | 
 550 | 						// определяем самый широкий пункт селекта
 551 | 						var liWidthInner = 0,
 552 | 								liWidth = 0;
 553 | 						li.css({'display': 'inline-block'});
 554 | 						li.each(function() {
 555 | 							var l = $(this);
 556 | 							if (l.innerWidth() > liWidthInner) {
 557 | 								liWidthInner = l.innerWidth();
 558 | 								liWidth = l.width();
 559 | 							}
 560 | 						});
 561 | 						li.css({'display': ''});
 562 | 
 563 | 						// подстраиваем ширину свернутого селекта в зависимости
 564 | 						// от ширины плейсхолдера или самого широкого пункта
 565 | 						if (divText.is('.placeholder') && (divText.width() > liWidthInner)) {
 566 | 							divText.width(divText.width());
 567 | 						} else {
 568 | 							var selClone = selectbox.clone().appendTo('body').width('auto');
 569 | 							var selCloneWidth = selClone.outerWidth();
 570 | 							selClone.remove();
 571 | 							if (selCloneWidth == selectbox.outerWidth()) {
 572 | 								divText.width(liWidth);
 573 | 							}
 574 | 						}
 575 | 
 576 | 						// подстраиваем ширину выпадающего списка в зависимости от самого широкого пункта
 577 | 						if (liWidthInner > selectbox.width()) dropdown.width(liWidthInner);
 578 | 
 579 | 						// прячем 1-ю пустую опцию, если она есть и если атрибут data-placeholder не пустой
 580 | 						// если все же нужно, чтобы первая пустая опция отображалась, то указываем у селекта: data-placeholder=""
 581 | 						if (option.first().text() === '' && el.data('placeholder') !== '') {
 582 | 							li.first().hide();
 583 | 						}
 584 | 
 585 | 						var selectHeight = selectbox.outerHeight(true);
 586 | 						var searchHeight = search.parent().outerHeight(true) || 0;
 587 | 						var isMaxHeight = ul.css('max-height');
 588 | 						var liSelected = li.filter('.selected');
 589 | 						if (liSelected.length < 1) li.first().addClass('selected sel');
 590 | 						if (li.data('li-height') === undefined) {
 591 | 							var liOuterHeight = li.outerHeight();
 592 | 							if (selectPlaceholder !== false) liOuterHeight = li.eq(1).outerHeight();
 593 | 							li.data('li-height', liOuterHeight);
 594 | 						}
 595 | 						var position = dropdown.css('top');
 596 | 						if (dropdown.css('left') == 'auto') dropdown.css({left: 0});
 597 | 						if (dropdown.css('top') == 'auto') {
 598 | 							dropdown.css({top: selectHeight});
 599 | 							position = selectHeight;
 600 | 						}
 601 | 						dropdown.hide();
 602 | 
 603 | 						// если выбран не дефолтный пункт
 604 | 						if (liSelected.length) {
 605 | 							// добавляем класс, показывающий изменение селекта
 606 | 							if (option.first().text() != optionSelected.text()) {
 607 | 								selectbox.addClass('changed');
 608 | 							}
 609 | 							// передаем селекту класс выбранного пункта
 610 | 							selectbox.data('jqfs-class', liSelected.data('jqfs-class'));
 611 | 							selectbox.addClass(liSelected.data('jqfs-class'));
 612 | 						}
 613 | 
 614 | 						// если селект неактивный
 615 | 						if (el.is(':disabled')) {
 616 | 							selectbox.addClass('disabled');
 617 | 							return false;
 618 | 						}
 619 | 
 620 | 						// при клике на псевдоселекте
 621 | 						divSelect.click(function() {
 622 | 
 623 | 							// колбек при закрытии селекта
 624 | 							if ($('div.jq-selectbox').filter('.opened').length) {
 625 | 								opt.onSelectClosed.call($('div.jq-selectbox').filter('.opened'));
 626 | 							}
 627 | 
 628 | 							el.focus();
 629 | 
 630 | 							// если iOS, то не показываем выпадающий список,
 631 | 							// т.к. отображается нативный и неизвестно, как его спрятать
 632 | 							if (iOS) return;
 633 | 
 634 | 							// умное позиционирование
 635 | 							var win = $(window);
 636 | 							var liHeight = li.data('li-height');
 637 | 							var topOffset = selectbox.offset().top;
 638 | 							var bottomOffset = win.height() - selectHeight - (topOffset - win.scrollTop());
 639 | 							var visible = el.data('visible-options');
 640 | 							if (visible === undefined || visible === '') visible = opt.selectVisibleOptions;
 641 | 							var minHeight = liHeight * 5;
 642 | 							var newHeight = liHeight * visible;
 643 | 							if (visible > 0 && visible < 6) minHeight = newHeight;
 644 | 							if (visible === 0) newHeight = 'auto';
 645 | 
 646 | 							var dropDown = function() {
 647 | 								dropdown.height('auto').css({bottom: 'auto', top: position});
 648 | 								var maxHeightBottom = function() {
 649 | 									ul.css('max-height', Math.floor((bottomOffset - 20 - searchHeight) / liHeight) * liHeight);
 650 | 								};
 651 | 								maxHeightBottom();
 652 | 								ul.css('max-height', newHeight);
 653 | 								if (isMaxHeight != 'none') {
 654 | 									ul.css('max-height', isMaxHeight);
 655 | 								}
 656 | 								if (bottomOffset < (dropdown.outerHeight() + 20)) {
 657 | 									maxHeightBottom();
 658 | 								}
 659 | 							};
 660 | 
 661 | 							var dropUp = function() {
 662 | 								dropdown.height('auto').css({top: 'auto', bottom: position});
 663 | 								var maxHeightTop = function() {
 664 | 									ul.css('max-height', Math.floor((topOffset - win.scrollTop() - 20 - searchHeight) / liHeight) * liHeight);
 665 | 								};
 666 | 								maxHeightTop();
 667 | 								ul.css('max-height', newHeight);
 668 | 								if (isMaxHeight != 'none') {
 669 | 									ul.css('max-height', isMaxHeight);
 670 | 								}
 671 | 								if ((topOffset - win.scrollTop() - 20) < (dropdown.outerHeight() + 20)) {
 672 | 									maxHeightTop();
 673 | 								}
 674 | 							};
 675 | 
 676 | 							if (selectSmartPositioning === true || selectSmartPositioning === 1) {
 677 | 								// раскрытие вниз
 678 | 								if (bottomOffset > (minHeight + searchHeight + 20)) {
 679 | 									dropDown();
 680 | 									selectbox.removeClass('dropup').addClass('dropdown');
 681 | 								// раскрытие вверх
 682 | 								} else {
 683 | 									dropUp();
 684 | 									selectbox.removeClass('dropdown').addClass('dropup');
 685 | 								}
 686 | 							} else if (selectSmartPositioning === false || selectSmartPositioning === 0) {
 687 | 								// раскрытие вниз
 688 | 								if (bottomOffset > (minHeight + searchHeight + 20)) {
 689 | 									dropDown();
 690 | 									selectbox.removeClass('dropup').addClass('dropdown');
 691 | 								}
 692 | 							} else {
 693 | 								// если умное позиционирование отключено
 694 | 								dropdown.height('auto').css({bottom: 'auto', top: position});
 695 | 								ul.css('max-height', newHeight);
 696 | 								if (isMaxHeight != 'none') {
 697 | 									ul.css('max-height', isMaxHeight);
 698 | 								}
 699 | 							}
 700 | 
 701 | 							// если выпадающий список выходит за правый край окна браузера,
 702 | 							// то меняем позиционирование с левого на правое
 703 | 							if (selectbox.offset().left + dropdown.outerWidth() > win.width()) {
 704 | 								dropdown.css({left: 'auto', right: 0});
 705 | 							}
 706 | 							// конец умного позиционирования
 707 | 
 708 | 							$('div.jqselect').css({zIndex: (selectzIndex - 1)}).removeClass('opened');
 709 | 							selectbox.css({zIndex: selectzIndex});
 710 | 							if (dropdown.is(':hidden')) {
 711 | 								$('div.jq-selectbox__dropdown:visible').hide();
 712 | 								dropdown.show();
 713 | 								selectbox.addClass('opened focused');
 714 | 								// колбек при открытии селекта
 715 | 								opt.onSelectOpened.call(selectbox);
 716 | 							} else {
 717 | 								dropdown.hide();
 718 | 								selectbox.removeClass('opened dropup dropdown');
 719 | 								// колбек при закрытии селекта
 720 | 								if ($('div.jq-selectbox').filter('.opened').length) {
 721 | 									opt.onSelectClosed.call(selectbox);
 722 | 								}
 723 | 							}
 724 | 
 725 | 							// поисковое поле
 726 | 							if (search.length) {
 727 | 								search.val('').keyup();
 728 | 								notFound.hide();
 729 | 								search.keyup(function() {
 730 | 									var query = $(this).val();
 731 | 									li.each(function() {
 732 | 										if (!$(this).html().match(new RegExp('.*?' + query + '.*?', 'i'))) {
 733 | 											$(this).hide();
 734 | 										} else {
 735 | 											$(this).show();
 736 | 										}
 737 | 									});
 738 | 									// прячем 1-ю пустую опцию
 739 | 									if (option.first().text() === '' && el.data('placeholder') !== '') {
 740 | 										li.first().hide();
 741 | 									}
 742 | 									if (li.filter(':visible').length < 1) {
 743 | 										notFound.show();
 744 | 									} else {
 745 | 										notFound.hide();
 746 | 									}
 747 | 								});
 748 | 							}
 749 | 
 750 | 							// прокручиваем до выбранного пункта при открытии списка
 751 | 							if (li.filter('.selected').length) {
 752 | 								if (el.val() === '') {
 753 | 									ul.scrollTop(0);
 754 | 								} else {
 755 | 									// если нечетное количество видимых пунктов,
 756 | 									// то высоту пункта делим пополам для последующего расчета
 757 | 									if ( (ul.innerHeight() / liHeight) % 2 !== 0 ) liHeight = liHeight / 2;
 758 | 									ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() / 2 + liHeight);
 759 | 								}
 760 | 							}
 761 | 
 762 | 							preventScrolling(ul);
 763 | 
 764 | 						}); // end divSelect.click()
 765 | 
 766 | 						// при наведении курсора на пункт списка
 767 | 						li.hover(function() {
 768 | 							$(this).siblings().removeClass('selected');
 769 | 						});
 770 | 						var selectedText = li.filter('.selected').text();
 771 | 
 772 | 						// при клике на пункт списка
 773 | 						li.filter(':not(.disabled):not(.optgroup)').click(function() {
 774 | 							el.focus();
 775 | 							var t = $(this);
 776 | 							var liText = t.text();
 777 | 							if (!t.is('.selected')) {
 778 | 								var index = t.index();
 779 | 								index -= t.prevAll('.optgroup').length;
 780 | 								t.addClass('selected sel').siblings().removeClass('selected sel');
 781 | 								option.prop('selected', false).eq(index).prop('selected', true);
 782 | 								selectedText = liText;
 783 | 								divText.text(liText);
 784 | 
 785 | 								// передаем селекту класс выбранного пункта
 786 | 								if (selectbox.data('jqfs-class')) selectbox.removeClass(selectbox.data('jqfs-class'));
 787 | 								selectbox.data('jqfs-class', t.data('jqfs-class'));
 788 | 								selectbox.addClass(t.data('jqfs-class'));
 789 | 
 790 | 								el.change();
 791 | 							}
 792 | 							dropdown.hide();
 793 | 							selectbox.removeClass('opened dropup dropdown');
 794 | 							// колбек при закрытии селекта
 795 | 							opt.onSelectClosed.call(selectbox);
 796 | 
 797 | 						});
 798 | 						dropdown.mouseout(function() {
 799 | 							$('li.sel', dropdown).addClass('selected');
 800 | 						});
 801 | 
 802 | 						// изменение селекта
 803 | 						el.on('change.styler', function() {
 804 | 							divText.text(option.filter(':selected').text()).removeClass('placeholder');
 805 | 							li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
 806 | 							// добавляем класс, показывающий изменение селекта
 807 | 							if (option.first().text() != li.filter('.selected').text()) {
 808 | 								selectbox.addClass('changed');
 809 | 							} else {
 810 | 								selectbox.removeClass('changed');
 811 | 							}
 812 | 						})
 813 | 						.on('focus.styler', function() {
 814 | 							selectbox.addClass('focused');
 815 | 							$('div.jqselect').not('.focused').removeClass('opened dropup dropdown').find('div.jq-selectbox__dropdown').hide();
 816 | 						})
 817 | 						.on('blur.styler', function() {
 818 | 							selectbox.removeClass('focused');
 819 | 						})
 820 | 						// изменение селекта с клавиатуры
 821 | 						.on('keydown.styler keyup.styler', function(e) {
 822 | 							var liHeight = li.data('li-height');
 823 | 							if (el.val() === '') {
 824 | 								divText.text(selectPlaceholder).addClass('placeholder');
 825 | 							} else {
 826 | 								divText.text(option.filter(':selected').text());
 827 | 							}
 828 | 							li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
 829 | 							// вверх, влево, Page Up, Home
 830 | 							if (e.which == 38 || e.which == 37 || e.which == 33 || e.which == 36) {
 831 | 								if (el.val() === '') {
 832 | 									ul.scrollTop(0);
 833 | 								} else {
 834 | 									ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
 835 | 								}
 836 | 							}
 837 | 							// вниз, вправо, Page Down, End
 838 | 							if (e.which == 40 || e.which == 39 || e.which == 34 || e.which == 35) {
 839 | 								ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() + liHeight);
 840 | 							}
 841 | 							// закрываем выпадающий список при нажатии Enter
 842 | 							if (e.which == 13) {
 843 | 								e.preventDefault();
 844 | 								dropdown.hide();
 845 | 								selectbox.removeClass('opened dropup dropdown');
 846 | 								// колбек при закрытии селекта
 847 | 								opt.onSelectClosed.call(selectbox);
 848 | 							}
 849 | 						}).on('keydown.styler', function(e) {
 850 | 							// открываем выпадающий список при нажатии Space
 851 | 							if (e.which == 32) {
 852 | 								e.preventDefault();
 853 | 								divSelect.click();
 854 | 							}
 855 | 						});
 856 | 
 857 | 						// прячем выпадающий список при клике за пределами селекта
 858 | 						if (!onDocumentClick.registered) {
 859 | 							$(document).on('click', onDocumentClick);
 860 | 							onDocumentClick.registered = true;
 861 | 						}
 862 | 
 863 | 					} // end doSelect()
 864 | 
 865 | 					// мультиселект
 866 | 					function doMultipleSelect() {
 867 | 
 868 | 						var att = new Attributes();
 869 | 						var selectbox =
 870 | 							$('<div class="jq-select-multiple jqselect"></div>')
 871 | 							.attr({
 872 | 								id: att.id,
 873 | 								title: att.title
 874 | 							})
 875 | 							.addClass(att.classes)
 876 | 							.data(att.data)
 877 | 						;
 878 | 
 879 | 						el.after(selectbox);
 880 | 
 881 | 						makeList();
 882 | 						selectbox.append('<ul>' + list + '</ul>');
 883 | 						var ul = $('ul', selectbox);
 884 | 						var li = $('li', selectbox);
 885 | 						var size = el.attr('size');
 886 | 						var ulHeight = ul.outerHeight();
 887 | 						var liHeight = li.outerHeight();
 888 | 						if (size !== undefined && size > 0) {
 889 | 							ul.css({'height': liHeight * size});
 890 | 						} else {
 891 | 							ul.css({'height': liHeight * 4});
 892 | 						}
 893 | 						if (ulHeight > selectbox.height()) {
 894 | 							ul.css('overflowY', 'scroll');
 895 | 							preventScrolling(ul);
 896 | 							// прокручиваем до выбранного пункта
 897 | 							if (li.filter('.selected').length) {
 898 | 								ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
 899 | 							}
 900 | 						}
 901 | 
 902 | 						// прячем оригинальный селект
 903 | 						el.prependTo(selectbox);
 904 | 
 905 | 						// если селект неактивный
 906 | 						if (el.is(':disabled')) {
 907 | 							selectbox.addClass('disabled');
 908 | 							option.each(function() {
 909 | 								if ($(this).is(':selected')) li.eq($(this).index()).addClass('selected');
 910 | 							});
 911 | 
 912 | 						// если селект активный
 913 | 						} else {
 914 | 
 915 | 							// при клике на пункт списка
 916 | 							li.filter(':not(.disabled):not(.optgroup)').click(function(e) {
 917 | 								el.focus();
 918 | 								var clkd = $(this);
 919 | 								if(!e.ctrlKey && !e.metaKey) clkd.addClass('selected');
 920 | 								if(!e.shiftKey) clkd.addClass('first');
 921 | 								if(!e.ctrlKey && !e.metaKey && !e.shiftKey) clkd.siblings().removeClass('selected first');
 922 | 
 923 | 								// выделение пунктов при зажатом Ctrl
 924 | 								if(e.ctrlKey || e.metaKey) {
 925 | 									if (clkd.is('.selected')) clkd.removeClass('selected first');
 926 | 										else clkd.addClass('selected first');
 927 | 									clkd.siblings().removeClass('first');
 928 | 								}
 929 | 
 930 | 								// выделение пунктов при зажатом Shift
 931 | 								if(e.shiftKey) {
 932 | 									var prev = false,
 933 | 											next = false;
 934 | 									clkd.siblings().removeClass('selected').siblings('.first').addClass('selected');
 935 | 									clkd.prevAll().each(function() {
 936 | 										if ($(this).is('.first')) prev = true;
 937 | 									});
 938 | 									clkd.nextAll().each(function() {
 939 | 										if ($(this).is('.first')) next = true;
 940 | 									});
 941 | 									if (prev) {
 942 | 										clkd.prevAll().each(function() {
 943 | 											if ($(this).is('.selected')) return false;
 944 | 												else $(this).not('.disabled, .optgroup').addClass('selected');
 945 | 										});
 946 | 									}
 947 | 									if (next) {
 948 | 										clkd.nextAll().each(function() {
 949 | 											if ($(this).is('.selected')) return false;
 950 | 												else $(this).not('.disabled, .optgroup').addClass('selected');
 951 | 										});
 952 | 									}
 953 | 									if (li.filter('.selected').length == 1) clkd.addClass('first');
 954 | 								}
 955 | 
 956 | 								// отмечаем выбранные мышью
 957 | 								option.prop('selected', false);
 958 | 								li.filter('.selected').each(function() {
 959 | 									var t = $(this);
 960 | 									var index = t.index();
 961 | 									if (t.is('.option')) index -= t.prevAll('.optgroup').length;
 962 | 									option.eq(index).prop('selected', true);
 963 | 								});
 964 | 								el.change();
 965 | 
 966 | 							});
 967 | 
 968 | 							// отмечаем выбранные с клавиатуры
 969 | 							option.each(function(i) {
 970 | 								$(this).data('optionIndex', i);
 971 | 							});
 972 | 							el.on('change.styler', function() {
 973 | 								li.removeClass('selected');
 974 | 								var arrIndexes = [];
 975 | 								option.filter(':selected').each(function() {
 976 | 									arrIndexes.push($(this).data('optionIndex'));
 977 | 								});
 978 | 								li.not('.optgroup').filter(function(i) {
 979 | 									return $.inArray(i, arrIndexes) > -1;
 980 | 								}).addClass('selected');
 981 | 							})
 982 | 							.on('focus.styler', function() {
 983 | 								selectbox.addClass('focused');
 984 | 							})
 985 | 							.on('blur.styler', function() {
 986 | 								selectbox.removeClass('focused');
 987 | 							});
 988 | 
 989 | 							// прокручиваем с клавиатуры
 990 | 							if (ulHeight > selectbox.height()) {
 991 | 								el.on('keydown.styler', function(e) {
 992 | 									// вверх, влево, PageUp
 993 | 									if (e.which == 38 || e.which == 37 || e.which == 33) {
 994 | 										ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - liHeight);
 995 | 									}
 996 | 									// вниз, вправо, PageDown
 997 | 									if (e.which == 40 || e.which == 39 || e.which == 34) {
 998 | 										ul.scrollTop(ul.scrollTop() + li.filter('.selected:last').position().top - ul.innerHeight() + liHeight * 2);
 999 | 									}
1000 | 								});
1001 | 							}
1002 | 
1003 | 						}
1004 | 					} // end doMultipleSelect()
1005 | 
1006 | 					if (el.is('[multiple]')) {
1007 | 
1008 | 						// если Android или iOS, то мультиселект не стилизуем
1009 | 						// причина для Android - в стилизованном селекте нет возможности выбрать несколько пунктов
1010 | 						// причина для iOS - в стилизованном селекте неправильно отображаются выбранные пункты
1011 | 						if (Android || iOS) return;
1012 | 
1013 | 						doMultipleSelect();
1014 | 					} else {
1015 | 						doSelect();
1016 | 					}
1017 | 
1018 | 				}; // end selectboxOutput()
1019 | 
1020 | 				selectboxOutput();
1021 | 
1022 | 				// обновление при динамическом изменении
1023 | 				el.on('refresh', function() {
1024 | 					el.off('.styler').parent().before(el).remove();
1025 | 					selectboxOutput();
1026 | 				});
1027 | 
1028 | 			// end select
1029 | 
1030 | 			// reset
1031 | 			} else if (el.is(':reset')) {
1032 | 				el.on('click', function() {
1033 | 					setTimeout(function() {
1034 | 						el.closest('form').find('input, select').trigger('refresh');
1035 | 					}, 1);
1036 | 				});
1037 | 			} // end reset
1038 | 
1039 | 		}, // init: function()
1040 | 
1041 | 		// деструктор
1042 | 		destroy: function() {
1043 | 
1044 | 			var el = $(this.element);
1045 | 
1046 | 			if (el.is(':checkbox') || el.is(':radio')) {
1047 | 				el.removeData('_' + pluginName).off('.styler refresh').removeAttr('style').parent().before(el).remove();
1048 | 				el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
1049 | 			} else if (el.is('input[type="number"]')) {
1050 | 				el.removeData('_' + pluginName).off('.styler refresh').closest('.jq-number').before(el).remove();
1051 | 			} else if (el.is(':file') || el.is('select')) {
1052 | 				el.removeData('_' + pluginName).off('.styler refresh').removeAttr('style').parent().before(el).remove();
1053 | 			}
1054 | 
1055 | 		} // destroy: function()
1056 | 
1057 | 	}; // Plugin.prototype
1058 | 
1059 | 	$.fn[pluginName] = function(options) {
1060 | 		var args = arguments;
1061 | 		if (options === undefined || typeof options === 'object') {
1062 | 			this.each(function() {
1063 | 				if (!$.data(this, '_' + pluginName)) {
1064 | 					$.data(this, '_' + pluginName, new Plugin(this, options));
1065 | 				}
1066 | 			})
1067 | 			// колбек после выполнения плагина
1068 | 			.promise()
1069 | 			.done(function() {
1070 | 				var opt = $(this[0]).data('_' + pluginName);
1071 | 				if (opt) opt.options.onFormStyled.call();
1072 | 			});
1073 | 			return this;
1074 | 		} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
1075 | 			var returns;
1076 | 			this.each(function() {
1077 | 				var instance = $.data(this, '_' + pluginName);
1078 | 				if (instance instanceof Plugin && typeof instance[options] === 'function') {
1079 | 					returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
1080 | 				}
1081 | 			});
1082 | 			return returns !== undefined ? returns : this;
1083 | 		}
1084 | 	};
1085 | 
1086 | 	// прячем выпадающий список при клике за пределами селекта
1087 | 	function onDocumentClick(e) {
1088 | 		// e.target.nodeName != 'OPTION' - добавлено для обхода бага в Opera на движке Presto
1089 | 		// (при изменении селекта с клавиатуры срабатывает событие onclick)
1090 | 		if (!$(e.target).parents().hasClass('jq-selectbox') && e.target.nodeName != 'OPTION') {
1091 | 			if ($('div.jq-selectbox.opened').length) {
1092 | 				var selectbox = $('div.jq-selectbox.opened'),
1093 | 						search = $('div.jq-selectbox__search input', selectbox),
1094 | 						dropdown = $('div.jq-selectbox__dropdown', selectbox),
1095 | 						opt = selectbox.find('select').data('_' + pluginName).options;
1096 | 
1097 | 				// колбек при закрытии селекта
1098 | 				opt.onSelectClosed.call(selectbox);
1099 | 
1100 | 				if (search.length) search.val('').keyup();
1101 | 				dropdown.hide().find('li.sel').addClass('selected');
1102 | 				selectbox.removeClass('focused opened dropup dropdown');
1103 | 			}
1104 | 		}
1105 | 	}
1106 | 	onDocumentClick.registered = false;
1107 | 
1108 | }));


--------------------------------------------------------------------------------
/dist/jquery.formstyler.min.js:
--------------------------------------------------------------------------------
1 | /* jQuery Form Styler v2.0.2 | (c) Dimox | https://github.com/Dimox/jQueryFormStyler */
2 | !function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e($||require("jquery")):e(jQuery)}(function(e){"use strict";function t(t,s){this.element=t,this.options=e.extend({},l,s);var i=this.options.locale;void 0!==this.options.locales[i]&&e.extend(this.options,this.options.locales[i]),this.init()}function s(t){if(!e(t.target).parents().hasClass("jq-selectbox")&&"OPTION"!=t.target.nodeName&&e("div.jq-selectbox.opened").length){var s=e("div.jq-selectbox.opened"),l=e("div.jq-selectbox__search input",s),o=e("div.jq-selectbox__dropdown",s);s.find("select").data("_"+i).options.onSelectClosed.call(s),l.length&&l.val("").keyup(),o.hide().find("li.sel").addClass("selected"),s.removeClass("focused opened dropup dropdown")}}var i="styler",l={idSuffix:"-styler",filePlaceholder:"Файл не выбран",fileBrowse:"Обзор...",fileNumber:"Выбрано файлов: %s",selectPlaceholder:"Выберите...",selectSearch:!1,selectSearchLimit:10,selectSearchNotFound:"Совпадений не найдено",selectSearchPlaceholder:"Поиск...",selectVisibleOptions:0,selectSmartPositioning:!0,locale:"ru",locales:{en:{filePlaceholder:"No file selected",fileBrowse:"Browse...",fileNumber:"Selected files: %s",selectPlaceholder:"Select...",selectSearchNotFound:"No matches found",selectSearchPlaceholder:"Search..."}},onSelectOpened:function(){},onSelectClosed:function(){},onFormStyled:function(){}};t.prototype={init:function(){function t(){void 0!==i.attr("id")&&""!==i.attr("id")&&(this.id=i.attr("id")+l.idSuffix),this.title=i.attr("title"),this.classes=i.attr("class"),this.data=i.data()}var i=e(this.element),l=this.options,o=!(!navigator.userAgent.match(/(iPad|iPhone|iPod)/i)||navigator.userAgent.match(/(Windows\sPhone)/i)),a=!(!navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/(Windows\sPhone)/i));if(i.is(":checkbox")){var d=function(){var s=new t,l=e('<div class="jq-checkbox"><div class="jq-checkbox__div"></div></div>').attr({id:s.id,title:s.title}).addClass(s.classes).data(s.data);i.after(l).prependTo(l),i.is(":checked")&&l.addClass("checked"),i.is(":disabled")&&l.addClass("disabled"),l.click(function(e){e.preventDefault(),i.triggerHandler("click"),l.is(".disabled")||(i.is(":checked")?(i.prop("checked",!1),l.removeClass("checked")):(i.prop("checked",!0),l.addClass("checked")),i.focus().change())}),i.closest("label").add('label[for="'+i.attr("id")+'"]').on("click.styler",function(t){e(t.target).is("a")||e(t.target).closest(l).length||(l.triggerHandler("click"),t.preventDefault())}),i.on("change.styler",function(){i.is(":checked")?l.addClass("checked"):l.removeClass("checked")}).on("keydown.styler",function(e){32==e.which&&l.click()}).on("focus.styler",function(){l.is(".disabled")||l.addClass("focused")}).on("blur.styler",function(){l.removeClass("focused")})};d(),i.on("refresh",function(){i.closest("label").add('label[for="'+i.attr("id")+'"]').off(".styler"),i.off(".styler").parent().before(i).remove(),d()})}else if(i.is(":radio")){var r=function(){var s=new t,l=e('<div class="jq-radio"><div class="jq-radio__div"></div></div>').attr({id:s.id,title:s.title}).addClass(s.classes).data(s.data);i.after(l).prependTo(l),i.is(":checked")&&l.addClass("checked"),i.is(":disabled")&&l.addClass("disabled"),e.fn.commonParents=function(){var t=this;return t.first().parents().filter(function(){return e(this).find(t).length===t.length})},e.fn.commonParent=function(){return e(this).commonParents().first()},l.click(function(t){if(t.preventDefault(),i.triggerHandler("click"),!l.is(".disabled")){var s=e('input[name="'+i.attr("name")+'"]');s.commonParent().find(s).prop("checked",!1).parent().removeClass("checked"),i.prop("checked",!0).parent().addClass("checked"),i.focus().change()}}),i.closest("label").add('label[for="'+i.attr("id")+'"]').on("click.styler",function(t){e(t.target).is("a")||e(t.target).closest(l).length||(l.triggerHandler("click"),t.preventDefault())}),i.on("change.styler",function(){i.parent().addClass("checked")}).on("focus.styler",function(){l.is(".disabled")||l.addClass("focused")}).on("blur.styler",function(){l.removeClass("focused")})};r(),i.on("refresh",function(){i.closest("label").add('label[for="'+i.attr("id")+'"]').off(".styler"),i.off(".styler").parent().before(i).remove(),r()})}else if(i.is(":file")){var c=function(){var s=new t,o=i.data("placeholder");void 0===o&&(o=l.filePlaceholder);var a=i.data("browse");void 0!==a&&""!==a||(a=l.fileBrowse);var d=e('<div class="jq-file"><div class="jq-file__name">'+o+'</div><div class="jq-file__browse">'+a+"</div></div>").attr({id:s.id,title:s.title}).addClass(s.classes).data(s.data);i.after(d).appendTo(d),i.is(":disabled")&&d.addClass("disabled");var r=i.val(),c=e("div.jq-file__name",d);r&&c.text(r.replace(/.+[\\\/]/,"")),i.on("change.styler",function(){var e=i.val();if(i.is("[multiple]")){e="";var t=i[0].files.length;if(t>0){var s=i.data("number");void 0===s&&(s=l.fileNumber),s=s.replace("%s",t),e=s}}c.text(e.replace(/.+[\\\/]/,"")),""===e?(c.text(o),d.removeClass("changed")):d.addClass("changed")}).on("focus.styler",function(){d.addClass("focused")}).on("blur.styler",function(){d.removeClass("focused")}).on("click.styler",function(){d.removeClass("focused")})};c(),i.on("refresh",function(){i.off(".styler").parent().before(i).remove(),c()})}else if(i.is('input[type="number"]')){var n=function(){var s=new t,l=e('<div class="jq-number"><div class="jq-number__spin minus"></div><div class="jq-number__spin plus"></div></div>').attr({id:s.id,title:s.title}).addClass(s.classes).data(s.data);i.after(l).prependTo(l).wrap('<div class="jq-number__field"></div>'),i.is(":disabled")&&l.addClass("disabled");var o,a,d,r=null,c=null;void 0!==i.attr("min")&&(o=i.attr("min")),void 0!==i.attr("max")&&(a=i.attr("max")),d=void 0!==i.attr("step")&&e.isNumeric(i.attr("step"))?Number(i.attr("step")):Number(1);var n=function(t){var s,l=i.val();e.isNumeric(l)||(l=0,i.val("0")),t.is(".minus")?s=Number(l)-d:t.is(".plus")&&(s=Number(l)+d);var r=(d.toString().split(".")[1]||[]).length;if(r>0){for(var c="1";c.length<=r;)c+="0";s=Math.round(s*c)/c}e.isNumeric(o)&&e.isNumeric(a)?s>=o&&s<=a&&i.val(s):e.isNumeric(o)&&!e.isNumeric(a)?s>=o&&i.val(s):!e.isNumeric(o)&&e.isNumeric(a)?s<=a&&i.val(s):i.val(s)};l.is(".disabled")||(l.on("mousedown","div.jq-number__spin",function(){var t=e(this);n(t),r=setTimeout(function(){c=setInterval(function(){n(t)},40)},350)}).on("mouseup mouseout","div.jq-number__spin",function(){clearTimeout(r),clearInterval(c)}).on("mouseup","div.jq-number__spin",function(){i.change().trigger("input")}),i.on("focus.styler",function(){l.addClass("focused")}).on("blur.styler",function(){l.removeClass("focused")}))};n(),i.on("refresh",function(){i.off(".styler").closest(".jq-number").before(i).remove(),n()})}else if(i.is("select")){var f=function(){function d(e){var t=e.prop("scrollHeight")-e.outerHeight(),s=null,i=null;e.off("mousewheel DOMMouseScroll").on("mousewheel DOMMouseScroll",function(l){s=l.originalEvent.detail<0||l.originalEvent.wheelDelta>0?1:-1,((i=e.scrollTop())>=t&&s<0||i<=0&&s>0)&&(l.stopPropagation(),l.preventDefault())})}function r(){for(var e=0;e<c.length;e++){var t=c.eq(e),s="",i="",o="",a="",d="",r="",f="",h="",u="";t.prop("selected")&&(i="selected sel"),t.is(":disabled")&&(i="disabled"),t.is(":selected:disabled")&&(i="selected sel disabled"),void 0!==t.attr("id")&&""!==t.attr("id")&&(a=' id="'+t.attr("id")+l.idSuffix+'"'),void 0!==t.attr("title")&&""!==c.attr("title")&&(d=' title="'+t.attr("title")+'"'),void 0!==t.attr("class")&&(f=" "+t.attr("class"),u=' data-jqfs-class="'+t.attr("class")+'"');var p=t.data();for(var v in p)""!==p[v]&&(r+=" data-"+v+'="'+p[v]+'"');i+f!==""&&(o=' class="'+i+f+'"'),s="<li"+u+r+o+d+a+">"+t.html()+"</li>",t.parent().is("optgroup")&&(void 0!==t.parent().attr("class")&&(h=" "+t.parent().attr("class")),s="<li"+u+r+' class="'+i+f+" option"+h+'"'+d+a+">"+t.html()+"</li>",t.is(":first-child")&&(s='<li class="optgroup'+h+'">'+t.parent().attr("label")+"</li>"+s)),n+=s}}var c=e("option",i),n="";if(i.is("[multiple]")){if(a||o)return;!function(){var s=new t,l=e('<div class="jq-select-multiple jqselect"></div>').attr({id:s.id,title:s.title}).addClass(s.classes).data(s.data);i.after(l),r(),l.append("<ul>"+n+"</ul>");var o=e("ul",l),a=e("li",l),f=i.attr("size"),h=o.outerHeight(),u=a.outerHeight();void 0!==f&&f>0?o.css({height:u*f}):o.css({height:4*u}),h>l.height()&&(o.css("overflowY","scroll"),d(o),a.filter(".selected").length&&o.scrollTop(o.scrollTop()+a.filter(".selected").position().top)),i.prependTo(l),i.is(":disabled")?(l.addClass("disabled"),c.each(function(){e(this).is(":selected")&&a.eq(e(this).index()).addClass("selected")})):(a.filter(":not(.disabled):not(.optgroup)").click(function(t){i.focus();var s=e(this);if(t.ctrlKey||t.metaKey||s.addClass("selected"),t.shiftKey||s.addClass("first"),t.ctrlKey||t.metaKey||t.shiftKey||s.siblings().removeClass("selected first"),(t.ctrlKey||t.metaKey)&&(s.is(".selected")?s.removeClass("selected first"):s.addClass("selected first"),s.siblings().removeClass("first")),t.shiftKey){var l=!1,o=!1;s.siblings().removeClass("selected").siblings(".first").addClass("selected"),s.prevAll().each(function(){e(this).is(".first")&&(l=!0)}),s.nextAll().each(function(){e(this).is(".first")&&(o=!0)}),l&&s.prevAll().each(function(){if(e(this).is(".selected"))return!1;e(this).not(".disabled, .optgroup").addClass("selected")}),o&&s.nextAll().each(function(){if(e(this).is(".selected"))return!1;e(this).not(".disabled, .optgroup").addClass("selected")}),1==a.filter(".selected").length&&s.addClass("first")}c.prop("selected",!1),a.filter(".selected").each(function(){var t=e(this),s=t.index();t.is(".option")&&(s-=t.prevAll(".optgroup").length),c.eq(s).prop("selected",!0)}),i.change()}),c.each(function(t){e(this).data("optionIndex",t)}),i.on("change.styler",function(){a.removeClass("selected");var t=[];c.filter(":selected").each(function(){t.push(e(this).data("optionIndex"))}),a.not(".optgroup").filter(function(s){return e.inArray(s,t)>-1}).addClass("selected")}).on("focus.styler",function(){l.addClass("focused")}).on("blur.styler",function(){l.removeClass("focused")}),h>l.height()&&i.on("keydown.styler",function(e){38!=e.which&&37!=e.which&&33!=e.which||o.scrollTop(o.scrollTop()+a.filter(".selected").position().top-u),40!=e.which&&39!=e.which&&34!=e.which||o.scrollTop(o.scrollTop()+a.filter(".selected:last").position().top-o.innerHeight()+2*u)}))}()}else!function(){var a=new t,f="",h=i.data("placeholder"),u=i.data("search"),p=i.data("search-limit"),v=i.data("search-not-found"),m=i.data("search-placeholder"),g=i.data("smart-positioning");void 0===h&&(h=l.selectPlaceholder),void 0!==u&&""!==u||(u=l.selectSearch),void 0!==p&&""!==p||(p=l.selectSearchLimit),void 0!==v&&""!==v||(v=l.selectSearchNotFound),void 0===m&&(m=l.selectSearchPlaceholder),void 0!==g&&""!==g||(g=l.selectSmartPositioning);var b=e('<div class="jq-selectbox jqselect"><div class="jq-selectbox__select"><div class="jq-selectbox__select-text"></div><div class="jq-selectbox__trigger"><div class="jq-selectbox__trigger-arrow"></div></div></div></div>').attr({id:a.id,title:a.title}).addClass(a.classes).data(a.data);i.after(b).prependTo(b);var C=b.css("z-index");C=C>0?C:1;var x=e("div.jq-selectbox__select",b),y=e("div.jq-selectbox__select-text",b),w=c.filter(":selected");r(),u&&(f='<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="'+m+'"></div><div class="jq-selectbox__not-found">'+v+"</div>");var q=e('<div class="jq-selectbox__dropdown">'+f+"<ul>"+n+"</ul></div>");b.append(q);var _=e("ul",q),j=e("li",q),k=e("input",q),S=e("div.jq-selectbox__not-found",q).hide();j.length<p&&k.parent().hide(),""===c.first().text()&&c.first().is(":selected")&&!1!==h?y.text(h).addClass("placeholder"):y.text(w.text());var T=0,N=0;if(j.css({display:"inline-block"}),j.each(function(){var t=e(this);t.innerWidth()>T&&(T=t.innerWidth(),N=t.width())}),j.css({display:""}),y.is(".placeholder")&&y.width()>T)y.width(y.width());else{var P=b.clone().appendTo("body").width("auto"),H=P.outerWidth();P.remove(),H==b.outerWidth()&&y.width(N)}T>b.width()&&q.width(T),""===c.first().text()&&""!==i.data("placeholder")&&j.first().hide();var A=b.outerHeight(!0),D=k.parent().outerHeight(!0)||0,I=_.css("max-height"),K=j.filter(".selected");if(K.length<1&&j.first().addClass("selected sel"),void 0===j.data("li-height")){var O=j.outerHeight();!1!==h&&(O=j.eq(1).outerHeight()),j.data("li-height",O)}var M=q.css("top");if("auto"==q.css("left")&&q.css({left:0}),"auto"==q.css("top")&&(q.css({top:A}),M=A),q.hide(),K.length&&(c.first().text()!=w.text()&&b.addClass("changed"),b.data("jqfs-class",K.data("jqfs-class")),b.addClass(K.data("jqfs-class"))),i.is(":disabled"))return b.addClass("disabled"),!1;x.click(function(){if(e("div.jq-selectbox").filter(".opened").length&&l.onSelectClosed.call(e("div.jq-selectbox").filter(".opened")),i.focus(),!o){var t=e(window),s=j.data("li-height"),a=b.offset().top,r=t.height()-A-(a-t.scrollTop()),n=i.data("visible-options");void 0!==n&&""!==n||(n=l.selectVisibleOptions);var f=5*s,h=s*n;n>0&&n<6&&(f=h),0===n&&(h="auto");var u=function(){q.height("auto").css({bottom:"auto",top:M});var e=function(){_.css("max-height",Math.floor((r-20-D)/s)*s)};e(),_.css("max-height",h),"none"!=I&&_.css("max-height",I),r<q.outerHeight()+20&&e()};!0===g||1===g?r>f+D+20?(u(),b.removeClass("dropup").addClass("dropdown")):(function(){q.height("auto").css({top:"auto",bottom:M});var e=function(){_.css("max-height",Math.floor((a-t.scrollTop()-20-D)/s)*s)};e(),_.css("max-height",h),"none"!=I&&_.css("max-height",I),a-t.scrollTop()-20<q.outerHeight()+20&&e()}(),b.removeClass("dropdown").addClass("dropup")):!1===g||0===g?r>f+D+20&&(u(),b.removeClass("dropup").addClass("dropdown")):(q.height("auto").css({bottom:"auto",top:M}),_.css("max-height",h),"none"!=I&&_.css("max-height",I)),b.offset().left+q.outerWidth()>t.width()&&q.css({left:"auto",right:0}),e("div.jqselect").css({zIndex:C-1}).removeClass("opened"),b.css({zIndex:C}),q.is(":hidden")?(e("div.jq-selectbox__dropdown:visible").hide(),q.show(),b.addClass("opened focused"),l.onSelectOpened.call(b)):(q.hide(),b.removeClass("opened dropup dropdown"),e("div.jq-selectbox").filter(".opened").length&&l.onSelectClosed.call(b)),k.length&&(k.val("").keyup(),S.hide(),k.keyup(function(){var t=e(this).val();j.each(function(){e(this).html().match(new RegExp(".*?"+t+".*?","i"))?e(this).show():e(this).hide()}),""===c.first().text()&&""!==i.data("placeholder")&&j.first().hide(),j.filter(":visible").length<1?S.show():S.hide()})),j.filter(".selected").length&&(""===i.val()?_.scrollTop(0):(_.innerHeight()/s%2!=0&&(s/=2),_.scrollTop(_.scrollTop()+j.filter(".selected").position().top-_.innerHeight()/2+s))),d(_)}}),j.hover(function(){e(this).siblings().removeClass("selected")});var W=j.filter(".selected").text();j.filter(":not(.disabled):not(.optgroup)").click(function(){i.focus();var t=e(this),s=t.text();if(!t.is(".selected")){var o=t.index();o-=t.prevAll(".optgroup").length,t.addClass("selected sel").siblings().removeClass("selected sel"),c.prop("selected",!1).eq(o).prop("selected",!0),W=s,y.text(s),b.data("jqfs-class")&&b.removeClass(b.data("jqfs-class")),b.data("jqfs-class",t.data("jqfs-class")),b.addClass(t.data("jqfs-class")),i.change()}q.hide(),b.removeClass("opened dropup dropdown"),l.onSelectClosed.call(b)}),q.mouseout(function(){e("li.sel",q).addClass("selected")}),i.on("change.styler",function(){y.text(c.filter(":selected").text()).removeClass("placeholder"),j.removeClass("selected sel").not(".optgroup").eq(i[0].selectedIndex).addClass("selected sel"),c.first().text()!=j.filter(".selected").text()?b.addClass("changed"):b.removeClass("changed")}).on("focus.styler",function(){b.addClass("focused"),e("div.jqselect").not(".focused").removeClass("opened dropup dropdown").find("div.jq-selectbox__dropdown").hide()}).on("blur.styler",function(){b.removeClass("focused")}).on("keydown.styler keyup.styler",function(e){var t=j.data("li-height");""===i.val()?y.text(h).addClass("placeholder"):y.text(c.filter(":selected").text()),j.removeClass("selected sel").not(".optgroup").eq(i[0].selectedIndex).addClass("selected sel"),38!=e.which&&37!=e.which&&33!=e.which&&36!=e.which||(""===i.val()?_.scrollTop(0):_.scrollTop(_.scrollTop()+j.filter(".selected").position().top)),40!=e.which&&39!=e.which&&34!=e.which&&35!=e.which||_.scrollTop(_.scrollTop()+j.filter(".selected").position().top-_.innerHeight()+t),13==e.which&&(e.preventDefault(),q.hide(),b.removeClass("opened dropup dropdown"),l.onSelectClosed.call(b))}).on("keydown.styler",function(e){32==e.which&&(e.preventDefault(),x.click())}),s.registered||(e(document).on("click",s),s.registered=!0)}()};f(),i.on("refresh",function(){i.off(".styler").parent().before(i).remove(),f()})}else i.is(":reset")&&i.on("click",function(){setTimeout(function(){i.closest("form").find("input, select").trigger("refresh")},1)})},destroy:function(){var t=e(this.element);t.is(":checkbox")||t.is(":radio")?(t.removeData("_"+i).off(".styler refresh").removeAttr("style").parent().before(t).remove(),t.closest("label").add('label[for="'+t.attr("id")+'"]').off(".styler")):t.is('input[type="number"]')?t.removeData("_"+i).off(".styler refresh").closest(".jq-number").before(t).remove():(t.is(":file")||t.is("select"))&&t.removeData("_"+i).off(".styler refresh").removeAttr("style").parent().before(t).remove()}},e.fn[i]=function(s){var l=arguments;if(void 0===s||"object"==typeof s)return this.each(function(){e.data(this,"_"+i)||e.data(this,"_"+i,new t(this,s))}).promise().done(function(){var t=e(this[0]).data("_"+i);t&&t.options.onFormStyled.call()}),this;if("string"==typeof s&&"_"!==s[0]&&"init"!==s){var o;return this.each(function(){var a=e.data(this,"_"+i);a instanceof t&&"function"==typeof a[s]&&(o=a[s].apply(a,Array.prototype.slice.call(l,1)))}),void 0!==o?o:this}},s.registered=!1});


--------------------------------------------------------------------------------
/dist/jquery.formstyler.theme.css:
--------------------------------------------------------------------------------
  1 | .jq-checkbox,
  2 | .jq-radio {
  3 | 	vertical-align: -4px;
  4 | 	width: 16px;
  5 | 	height: 16px;
  6 | 	margin: 0 4px 0 0;
  7 | 	border: 1px solid #C3C3C3;
  8 | 	background: linear-gradient(#FFF, #E6E6E6);
  9 | 	box-shadow: 0 1px 1px rgba(0,0,0,.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
 10 | 	cursor: pointer;
 11 | }
 12 | .jq-checkbox.focused,
 13 | .jq-radio.focused {
 14 | 	border: 1px solid #08C;
 15 | }
 16 | .jq-checkbox.disabled,
 17 | .jq-radio.disabled {
 18 | 	opacity: .55;
 19 | }
 20 | .jq-checkbox {
 21 | 	border-radius: 3px;
 22 | }
 23 | .jq-checkbox.checked .jq-checkbox__div {
 24 | 	width: 8px;
 25 | 	height: 4px;
 26 | 	margin: 3px 0 0 3px;
 27 | 	border-bottom: 2px solid #666;
 28 | 	border-left: 2px solid #666;
 29 | 	-webkit-transform: rotate(-50deg);
 30 | 	transform: rotate(-50deg);
 31 | }
 32 | .jq-radio {
 33 | 	border-radius: 50%;
 34 | }
 35 | .jq-radio.checked .jq-radio__div {
 36 | 	width: 10px;
 37 | 	height: 10px;
 38 | 	margin: 3px 0 0 3px;
 39 | 	border-radius: 50%;
 40 | 	background: #777;
 41 | 	box-shadow: inset 1px 1px 1px rgba(0,0,0,.7);
 42 | }
 43 | .jq-file {
 44 | 	width: 270px;
 45 | 	border-radius: 4px;
 46 | 	box-shadow: 0 1px 2px rgba(0,0,0,.1);
 47 | }
 48 | .jq-file input {
 49 | 	cursor: pointer;
 50 | }
 51 | .jq-file__name {
 52 | 	box-sizing: border-box;
 53 | 	width: 100%;
 54 | 	height: 34px;
 55 | 	padding: 0 80px 0 10px;
 56 | 	border: 1px solid #CCC;
 57 | 	border-bottom-color: #B3B3B3;
 58 | 	border-radius: 4px;
 59 | 	background: #FFF;
 60 | 	box-shadow: inset 1px 1px #F1F1F1;
 61 | 	font: 14px/32px Arial, sans-serif;
 62 | 	color: #333;
 63 | }
 64 | .jq-file__browse {
 65 | 	position: absolute;
 66 | 	top: 1px;
 67 | 	right: 1px;
 68 | 	padding: 0 10px;
 69 | 	border-left: 1px solid #CCC;
 70 | 	border-radius: 0 4px 4px 0;
 71 | 	background: linear-gradient(#FFF, #E6E6E6);
 72 | 	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
 73 | 	font: 14px/32px Arial, sans-serif;
 74 | 	color: #333;
 75 | 	text-shadow: 1px 1px #FFF;
 76 | }
 77 | .jq-file:hover .jq-file__browse {
 78 | 	background: linear-gradient(#F6F6F6, #E6E6E6);
 79 | }
 80 | .jq-file:active .jq-file__browse {
 81 | 	background: #F5F5F5;
 82 | 	box-shadow: inset 1px 1px 3px #DDD;
 83 | }
 84 | .jq-file.focused .jq-file__name {
 85 | 	border: 1px solid #5794BF;
 86 | }
 87 | .jq-file.disabled,
 88 | .jq-file.disabled .jq-file__name,
 89 | .jq-file.disabled .jq-file__browse {
 90 | 	border-color: #CCC;
 91 | 	background: #F5F5F5;
 92 | 	box-shadow: none;
 93 | 	color: #888;
 94 | }
 95 | .jq-number {
 96 | 	position: relative;
 97 | 	vertical-align: middle;
 98 | 	padding: 0 36px 0 0;
 99 | }
100 | .jq-number__field {
101 | 	width: 100px;
102 | 	border: 1px solid #CCC;
103 | 	border-bottom-color: #B3B3B3;
104 | 	border-radius: 4px;
105 | 	box-shadow: inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
106 | }
107 | .jq-number__field:hover {
108 | 	border-color: #B3B3B3;
109 | }
110 | .jq-number__field input {
111 | 	box-sizing: border-box;
112 | 	width: 100%;
113 | 	padding: 8px 9px;
114 | 	border: none;
115 | 	outline: none;
116 | 	background: none;
117 | 	font: 14px Arial, sans-serif;
118 | 	color: #333;
119 | }
120 | .jq-number__spin {
121 | 	position: absolute;
122 | 	top: 0;
123 | 	right: 0;
124 | 	width: 32px;
125 | 	height: 14px;
126 | 	border: 1px solid #CCC;
127 | 	border-bottom-color: #B3B3B3;
128 | 	border-radius: 4px;
129 | 	background: linear-gradient(#FFF, #E6E6E6);
130 | 	box-shadow: 0 1px 2px rgba(0,0,0,.1);
131 | 	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
132 | 	-webkit-user-select: none;
133 | 	-moz-user-select: none;
134 | 	-ms-user-select: none;
135 | 	user-select: none;
136 | 	text-shadow: 1px 1px #FFF;
137 | 	cursor: pointer;
138 | }
139 | .jq-number__spin.minus {
140 | 	top: auto;
141 | 	bottom: 0;
142 | }
143 | .jq-number__spin:hover {
144 | 	background: linear-gradient(#F6F6F6, #E6E6E6);
145 | }
146 | .jq-number__spin:active {
147 | 	background: #F5F5F5;
148 | 	box-shadow: inset 1px 1px 3px #DDD;
149 | }
150 | .jq-number__spin:after {
151 | 	content: '';
152 | 	position: absolute;
153 | 	top: 4px;
154 | 	left: 11px;
155 | 	width: 0;
156 | 	height: 0;
157 | 	border-right: 5px solid transparent;
158 | 	border-bottom: 5px solid #999;
159 | 	border-left: 5px solid transparent;
160 | }
161 | .jq-number__spin.minus:after {
162 | 	top: 5px;
163 | 	border-top: 5px solid #999;
164 | 	border-right: 5px solid transparent;
165 | 	border-bottom: none;
166 | 	border-left: 5px solid transparent;
167 | }
168 | .jq-number__spin.minus:hover:after {
169 | 	border-top-color: #000;
170 | }
171 | .jq-number__spin.plus:hover:after {
172 | 	border-bottom-color: #000;
173 | }
174 | .jq-number.focused .jq-number__field {
175 | 	border: 1px solid #5794BF;
176 | }
177 | .jq-number.disabled .jq-number__field,
178 | .jq-number.disabled .jq-number__spin {
179 | 	border-color: #CCC;
180 | 	background: #F5F5F5;
181 | 	box-shadow: none;
182 | 	color: #888;
183 | }
184 | .jq-number.disabled .jq-number__spin:after {
185 | 	border-bottom-color: #AAA;
186 | }
187 | .jq-number.disabled .jq-number__spin.minus:after {
188 | 	border-top-color: #AAA;
189 | }
190 | .jq-selectbox {
191 | 	vertical-align: middle;
192 | 	cursor: pointer;
193 | }
194 | .jq-selectbox__select {
195 | 	height: 32px;
196 | 	padding: 0 45px 0 10px;
197 | 	border: 1px solid #CCC;
198 | 	border-bottom-color: #B3B3B3;
199 | 	border-radius: 4px;
200 | 	background: linear-gradient(#FFF, #E6E6E6);
201 | 	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
202 | 	font: 14px/32px Arial, sans-serif;
203 | 	color: #333;
204 | 	text-shadow: 1px 1px #FFF;
205 | }
206 | .jq-selectbox__select:hover {
207 | 	background: linear-gradient(#F6F6F6, #E6E6E6);
208 | }
209 | .jq-selectbox__select:active {
210 | 	background: #F5F5F5;
211 | 	box-shadow: inset 1px 1px 3px #DDD;
212 | }
213 | .jq-selectbox.focused .jq-selectbox__select {
214 | 	border: 1px solid #5794BF;
215 | }
216 | .jq-selectbox.disabled .jq-selectbox__select {
217 | 	border-color: #CCC;
218 | 	background: #F5F5F5;
219 | 	box-shadow: none;
220 | 	color: #888;
221 | }
222 | .jq-selectbox__select-text {
223 | 	display: block;
224 | 	width: 100%;
225 | }
226 | .jq-selectbox .placeholder {
227 | 	color: #888;
228 | }
229 | .jq-selectbox__trigger {
230 | 	position: absolute;
231 | 	top: 0;
232 | 	right: 0;
233 | 	width: 34px;
234 | 	height: 100%;
235 | 	border-left: 1px solid #CCC;
236 | }
237 | .jq-selectbox__trigger-arrow {
238 | 	position: absolute;
239 | 	top: 14px;
240 | 	right: 12px;
241 | 	width: 0;
242 | 	height: 0;
243 | 	border-top: 5px solid #999;
244 | 	border-right: 5px solid transparent;
245 | 	border-left: 5px solid transparent;
246 | }
247 | .jq-selectbox:hover .jq-selectbox__trigger-arrow {
248 | 	border-top-color: #000;
249 | }
250 | .jq-selectbox.disabled .jq-selectbox__trigger-arrow {
251 | 	border-top-color: #AAA;
252 | }
253 | .jq-selectbox__dropdown {
254 | 	box-sizing: border-box;
255 | 	width: 100%;
256 | 	margin: 2px 0 0;
257 | 	padding: 0;
258 | 	border: 1px solid #CCC;
259 | 	border-radius: 4px;
260 | 	background: #FFF;
261 | 	box-shadow: 0 2px 10px rgba(0,0,0,.2);
262 | 	font: 14px/18px Arial, sans-serif;
263 | }
264 | .jq-selectbox__search {
265 | 	margin: 5px;
266 | }
267 | .jq-selectbox__search input {
268 | 	box-sizing: border-box;
269 | 	width: 100%;
270 | 	margin: 0;
271 | 	padding: 5px 27px 6px 8px;
272 | 	border: 1px solid #CCC;
273 | 	border-radius: 3px;
274 | 	outline: none;
275 | 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNqU078LAXEYx/FzYfNzk5TJaFNKYjFYSQZ/hvwBsvg1UCY2xT9gM8hukQGThWRjkcFw3pdnujhfT736Xn2fPvfc3fd07V0OFDDFAnM0ENYsZRiGLSc9OpqIYIA9fMhhjCrW2h9VlMlcH/aymMGtOqEugX08PwQucUZKdTozMIqdTc9WepQD7wjY9ARx+ydwhfyXfS+S0qMcOEQJGcueB3VccFINdMgal6NzkmPjRwJXxDBB7/2RDdtAp6wb+dpphHDASG5QQ0V6u2aoSqBZD/lDrNWRJynLK2qpBn4rc6K2XB9/Nb8EGABtf1thzY6X2AAAAABJRU5ErkJggg==') no-repeat 100% 50%;
276 | 	box-shadow: inset 1px 1px #F1F1F1;
277 | 	color: #333;
278 | }
279 | .jq-selectbox__not-found {
280 | 	margin: 5px;
281 | 	padding: 5px 8px 6px;
282 | 	background: #F0F0F0;
283 | 	font-size: 13px;
284 | }
285 | .jq-selectbox ul {
286 | 	margin: 0;
287 | 	padding: 0;
288 | }
289 | .jq-selectbox li {
290 | 	min-height: 18px;
291 | 	padding: 5px 10px 6px;
292 | 	color: #231F20;
293 | }
294 | .jq-selectbox li.selected {
295 | 	background-color: #A3ABB1;
296 | 	color: #FFF;
297 | }
298 | .jq-selectbox li:hover {
299 | 	background-color: #08C;
300 | 	color: #FFF;
301 | }
302 | .jq-selectbox li.disabled {
303 | 	color: #AAA;
304 | }
305 | .jq-selectbox li.disabled:hover {
306 | 	background: none;
307 | }
308 | .jq-selectbox li.optgroup {
309 | 	font-weight: bold;
310 | }
311 | .jq-selectbox li.optgroup:hover {
312 | 	background: none;
313 | 	color: #231F20;
314 | 	cursor: default;
315 | }
316 | .jq-selectbox li.option {
317 | 	padding-left: 25px;
318 | }
319 | .jq-select-multiple {
320 | 	box-sizing: border-box;
321 | 	padding: 1px;
322 | 	border: 1px solid #CCC;
323 | 	border-bottom-color: #B3B3B3;
324 | 	border-radius: 4px;
325 | 	background: #FFF;
326 | 	box-shadow: inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
327 | 	font: 14px/18px Arial, sans-serif;
328 | 	color: #333;
329 | 	cursor: default;
330 | }
331 | .jq-select-multiple.focused {
332 | 	border: 1px solid #5794BF;
333 | }
334 | .jq-select-multiple.disabled {
335 | 	border-color: #CCC;
336 | 	background: #F5F5F5;
337 | 	box-shadow: none;
338 | 	color: #888;
339 | }
340 | .jq-select-multiple ul {
341 | 	margin: 0;
342 | 	padding: 0;
343 | }
344 | .jq-select-multiple li {
345 | 	padding: 3px 9px 4px;
346 | 	list-style: none;
347 | }
348 | .jq-select-multiple li:first-child {
349 | 	border-radius: 3px 3px 0 0;
350 | }
351 | .jq-select-multiple li:last-child {
352 | 	border-radius: 0 0 3px 3px;
353 | }
354 | .jq-select-multiple li.selected {
355 | 	background: #08C;
356 | 	color: #FFF;
357 | }
358 | .jq-select-multiple li.disabled {
359 | 	color: #AAA;
360 | }
361 | .jq-select-multiple li.optgroup {
362 | 	font-weight: bold;
363 | }
364 | .jq-select-multiple li.option {
365 | 	padding-left: 25px;
366 | }
367 | .jq-select-multiple.disabled li.selected,
368 | .jq-select-multiple li.selected.disabled {
369 | 	background: #CCC;
370 | 	color: #FFF;
371 | }
372 | input[type='email'].styler,
373 | input[type='password'].styler,
374 | input[type='search'].styler,
375 | input[type='tel'].styler,
376 | input[type='text'].styler,
377 | input[type='url'].styler,
378 | textarea.styler {
379 | 	padding: 8px 9px;
380 | 	border: 1px solid #CCC;
381 | 	border-bottom-color: #B3B3B3;
382 | 	border-radius: 4px;
383 | 	box-shadow: inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
384 | 	font: 14px Arial, sans-serif;
385 | 	color: #333;
386 | }
387 | input[type='search'].styler {
388 | 	-webkit-appearance: none;
389 | 	-moz-appearance: none;
390 | 	appearance: none;
391 | }
392 | textarea.styler {
393 | 	overflow: auto;
394 | }
395 | input[type='email'].styler:hover,
396 | input[type='password'].styler:hover,
397 | input[type='search'].styler:hover,
398 | input[type='tel'].styler:hover,
399 | input[type='text'].styler:hover,
400 | input[type='url'].styler:hover,
401 | textarea.styler:hover {
402 | 	border-color: #B3B3B3;
403 | }
404 | input[type='email'].styler:hover:focus,
405 | input[type='password'].styler:hover:focus,
406 | input[type='search'].styler:hover:focus,
407 | input[type='tel'].styler:hover:focus,
408 | input[type='text'].styler:hover:focus,
409 | input[type='url'].styler:hover:focus,
410 | textarea.styler:hover:focus {
411 | 	border-color: #CCC;
412 | 	border-top-color: #B3B3B3;
413 | 	outline: none;
414 | 	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
415 | }
416 | button.styler,
417 | input[type='button'].styler,
418 | input[type='submit'].styler,
419 | input[type='reset'].styler {
420 | 	overflow: visible;
421 | 	padding: 8px 11px;
422 | 	border: 1px solid #CCC;
423 | 	border-bottom-color: #B3B3B3;
424 | 	border-radius: 4px;
425 | 	outline: none;
426 | 	background: linear-gradient(#FFF, #E6E6E6);
427 | 	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
428 | 	font: 14px Arial, sans-serif;
429 | 	color: #333;
430 | 	text-shadow: 1px 1px #FFF;
431 | 	cursor: pointer;
432 | }
433 | button.styler.styler::-moz-focus-inner,
434 | input[type='button'].styler.styler::-moz-focus-inner,
435 | input[type='submit'].styler.styler::-moz-focus-inner,
436 | input[type='reset'].styler.styler::-moz-focus-inner {
437 | 	padding: 0;
438 | 	border: 0;
439 | }
440 | button.styler:not([disabled]):hover,
441 | input[type='button'].styler:not([disabled]):hover,
442 | input[type='submit'].styler:not([disabled]):hover,
443 | input[type='reset'].styler:not([disabled]):hover,
444 | input[type='reset'].styler:hover {
445 | 	background: linear-gradient(#F6F6F6, #E6E6E6);
446 | }
447 | button.styler:active,
448 | input[type='button'].styler:active,
449 | input[type='submit'].styler:active,
450 | input[type='reset'].styler:active {
451 | 	background: #F5F5F5;
452 | 	box-shadow: inset 1px 1px 3px #DDD;
453 | }
454 | button.styler[disabled],
455 | input[type='button'].styler[disabled],
456 | input[type='submit'].styler[disabled] {
457 | 	border-color: #CCC;
458 | 	background: #F5F5F5;
459 | 	box-shadow: none;
460 | 	color: #888;
461 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp         = require('gulp'),
 2 | 		autoprefixer = require('gulp-autoprefixer'),
 3 | 		browserSync  = require('browser-sync').create(),
 4 | 		csscomb      = require('gulp-csscomb'),
 5 | 		header       = require('gulp-header'),
 6 | 		notify       = require('gulp-notify'),
 7 | 		plumber      = require('gulp-plumber'),
 8 | 		rename       = require('gulp-rename'),
 9 | 		stylus       = require('gulp-stylus'),
10 | 		uglify       = require('gulp-uglify');
11 | 
12 | gulp.task('default:dist', ['stylus:dist']);
13 | gulp.task('default:test', ['stylus:test', 'webserver:test']);
14 | 
15 | var pkg = require('./package.json');
16 | var head = ['/* jQuery Form Styler v<%= pkg.version %> | (c) Dimox | https://github.com/Dimox/jQueryFormStyler */\n'];
17 | var path = {
18 | 	test: '../test/',
19 | 	dist: 'dist/',
20 | 	src: {
21 | 		js: 'dist/jquery.formstyler.js',
22 | 		style: 'src/*.styl',
23 | 	},
24 | };
25 | 
26 | gulp.task('minify-js', function() {
27 | 	gulp.src(path.src.js)
28 | 		.pipe(uglify())
29 | 		.pipe(header(head, {pkg}))
30 | 		.pipe(rename({suffix: '.min'}))
31 | 		.pipe(gulp.dest(path.dist));
32 | });
33 | 
34 | gulp.task('stylus:dist', function() {
35 | 	gulp.src(path.src.style)
36 | 		.pipe(plumber({errorHandler: notify.onError("Ошибка: <%= error.message %>")}))
37 | 		.pipe(stylus())
38 | 		.pipe(autoprefixer({
39 | 			browsers: ['last 2 versions', 'ie 10', 'Safari 7']
40 | 		}))
41 | 		.pipe(csscomb())
42 | 		.pipe(gulp.dest(path.dist))
43 | 		.pipe(browserSync.stream())
44 | 	;
45 | });
46 | 
47 | gulp.task('stylus:test', function() {
48 | 	gulp.src(path.src.style)
49 | 		.pipe(plumber({errorHandler: notify.onError("Ошибка: <%= error.message %>")}))
50 | 		.pipe(stylus())
51 | 		.pipe(autoprefixer({
52 | 			browsers: ['last 2 versions', 'ie 10', 'Safari 7']
53 | 		}))
54 | 		.pipe(csscomb())
55 | 		.pipe(gulp.dest(path.test))
56 | 		.pipe(browserSync.stream())
57 | 	;
58 | });
59 | 
60 | gulp.task('webserver:test', ['watch:test'], function() {
61 | 	browserSync.init({
62 | 		server: {
63 | 			baseDir: path.test
64 | 		},
65 | 		scrollProportionally: false,
66 | 	});
67 | });
68 | 
69 | gulp.task('watch:test', function() {
70 | 	browserSync.watch(path.src.style).on('change', function () { gulp.start('stylus:test'); });
71 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-form-styler",
 3 |   "version": "2.0.2",
 4 |   "description": "jQuery-плагин для стилизации элементов HTML-форм",
 5 |   "main": "dist/jquery.formstyler.min.js",
 6 |   "author": "Dimox (http://dimox.name/)",
 7 |   "contributors": [
 8 |     "Sergey Slipchenko <faergeek@gmail.com>"
 9 |   ],
10 |   "keywords": [
11 |     "jquery",
12 |     "form",
13 |     "styler",
14 |     "dimox"
15 |   ],
16 |   "license": "MIT",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/Dimox/jQueryFormStyler.git"
20 |   },
21 |   "bugs": {
22 |     "url": "https://github.com/Dimox/jQueryFormStyler/issues"
23 |   },
24 |   "homepage": "http://dimox.name/jquery-form-styler/",
25 |   "dependencies": {
26 |     "jquery": "^1.7.0"
27 |   },
28 |   "devDependencies": {
29 |     "browser-sync": "^2.18.8",
30 |     "gulp": "^3.9.1",
31 |     "gulp-autoprefixer": "^3.1.1",
32 |     "gulp-csscomb": "^3.0.8",
33 |     "gulp-header": "^1.8.8",
34 |     "gulp-notify": "^3.0.0",
35 |     "gulp-plumber": "^1.1.0",
36 |     "gulp-rename": "^1.2.2",
37 |     "gulp-stylus": "^2.6.0",
38 |     "gulp-uglify": "^2.1.2"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/jquery.formstyler.styl:
--------------------------------------------------------------------------------
 1 | .jq-checkbox
 2 | .jq-radio
 3 | 	user-select none
 4 | 	display inline-block
 5 | 	position relative
 6 | 	overflow hidden
 7 | 	input
 8 | 		position absolute
 9 | 		z-index -1
10 | 		opacity 0
11 | 		margin 0
12 | 		padding 0
13 | 
14 | .jq-file
15 | 	display inline-block
16 | 	position relative
17 | 	overflow hidden
18 | 	input
19 | 		position absolute
20 | 		top 0
21 | 		right 0
22 | 		margin 0
23 | 		padding 0
24 | 		opacity 0
25 | 		font-size 100px
26 | 		height auto
27 | 		line-height 1em
28 | 	&__name
29 | 		overflow hidden
30 | 		white-space nowrap
31 | 		text-overflow ellipsis
32 | 
33 | .jq-selectbox
34 | .jq-select-multiple
35 | 	display inline-block
36 | 	position relative
37 | 	select
38 | 		position absolute
39 | 		top 0
40 | 		left 0
41 | 		width 100%
42 | 		height 100%
43 | 		margin 0
44 | 		padding 0
45 | 		opacity 0
46 | 	li
47 | 		user-select none
48 | 		white-space nowrap
49 | 
50 | .jq-selectbox
51 | 	z-index 10
52 | 	&__select
53 | 		position relative
54 | 	&__select-text
55 | 		overflow hidden
56 | 		white-space nowrap
57 | 		text-overflow ellipsis
58 | 		user-select none
59 | 	&__dropdown
60 | 		position absolute
61 | 	&__search
62 | 		input
63 | 			-webkit-appearance textfield
64 | 			&::-webkit-search-cancel-button
65 | 			&::-webkit-search-decoration
66 | 				-webkit-appearance none
67 | 	&__dropdown
68 | 		ul
69 | 			position relative
70 | 			list-style none
71 | 			overflow auto
72 | 			overflow-x hidden
73 | 			-webkit-overflow-scrolling touch
74 | 
75 | .jq-select-multiple
76 | 	ul
77 | 		position relative
78 | 		overflow-x hidden
79 | 		-webkit-overflow-scrolling touch
80 | 
81 | .jq-number
82 | 	display inline-block
83 | 	&__field
84 | 		input
85 | 			text-align left; /* для Opera Presto */
86 | 			-moz-appearance textfield
87 | 			&::-webkit-inner-spin-button
88 | 			&::-webkit-outer-spin-button
89 | 				margin 0; /* в каких-то браузерах присутствует отступ */
90 | 				-webkit-appearance none
91 | 


--------------------------------------------------------------------------------
/src/jquery.formstyler.theme.styl:
--------------------------------------------------------------------------------
  1 | .jq-checkbox
  2 | .jq-radio
  3 | 	vertical-align -4px
  4 | 	width 16px
  5 | 	height 16px
  6 | 	margin 0 4px 0 0
  7 | 	border 1px solid #C3C3C3
  8 | 	background linear-gradient(#FFF, #E6E6E6)
  9 | 	box-shadow 0 1px 1px rgba(0,0,0,.05), inset -1px -1px #FFF, inset 1px -1px #FFF
 10 | 	cursor pointer
 11 | 	&.focused
 12 | 		border 1px solid #08C
 13 | 	&.disabled
 14 | 		opacity .55
 15 | 
 16 | .jq-checkbox
 17 | 	border-radius 3px
 18 | 	&.checked
 19 | 		.jq-checkbox__div
 20 | 			width 8px
 21 | 			height 4px
 22 | 			margin 3px 0 0 3px
 23 | 			border-left 2px solid #666
 24 | 			border-bottom 2px solid #666
 25 | 			transform rotate(-50deg)
 26 | 
 27 | .jq-radio
 28 | 	border-radius 50%
 29 | 	&.checked
 30 | 		.jq-radio__div
 31 | 			width 10px
 32 | 			height 10px
 33 | 			margin 3px 0 0 3px
 34 | 			border-radius 50%
 35 | 			background #777
 36 | 			box-shadow inset 1px 1px 1px rgba(0,0,0,.7)
 37 | 
 38 | .jq-file
 39 | 	width 270px
 40 | 	border-radius 4px
 41 | 	box-shadow 0 1px 2px rgba(0,0,0,.1)
 42 | 	input
 43 | 		cursor pointer
 44 | 	&__name
 45 | 		box-sizing border-box
 46 | 		width 100%
 47 | 		height 34px
 48 | 		padding 0 80px 0 10px
 49 | 		border 1px solid #CCC
 50 | 		border-bottom-color #B3B3B3
 51 | 		border-radius 4px
 52 | 		background #FFF
 53 | 		box-shadow inset 1px 1px #F1F1F1
 54 | 		font 14px/32px Arial, sans-serif
 55 | 		color #333
 56 | 	&__browse
 57 | 		position absolute
 58 | 		top 1px
 59 | 		right 1px
 60 | 		padding 0 10px
 61 | 		border-left 1px solid #CCC
 62 | 		border-radius 0 4px 4px 0
 63 | 		background linear-gradient(#FFF, #E6E6E6)
 64 | 		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
 65 | 		font 14px/32px Arial, sans-serif
 66 | 		color #333
 67 | 		text-shadow 1px 1px #FFF
 68 | 	&:hover
 69 | 		.jq-file__browse
 70 | 			background linear-gradient(#F6F6F6, #E6E6E6)
 71 | 	&:active
 72 | 		.jq-file__browse
 73 | 			background #F5F5F5
 74 | 			box-shadow inset 1px 1px 3px #DDD
 75 | 	&.focused
 76 | 		.jq-file__name
 77 | 			border 1px solid #5794BF
 78 | 	&.disabled
 79 | 	&.disabled .jq-file__name
 80 | 	&.disabled .jq-file__browse
 81 | 		border-color #CCC
 82 | 		background #F5F5F5
 83 | 		box-shadow none
 84 | 		color #888
 85 | 
 86 | .jq-number
 87 | 	position relative
 88 | 	vertical-align middle
 89 | 	padding 0 36px 0 0
 90 | 	&__field
 91 | 		width 100px
 92 | 		border 1px solid #CCC
 93 | 		border-bottom-color #B3B3B3
 94 | 		border-radius 4px
 95 | 		box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
 96 | 		&:hover
 97 | 			border-color #B3B3B3
 98 | 		input
 99 | 			box-sizing border-box
100 | 			width 100%
101 | 			padding 8px 9px
102 | 			border none
103 | 			outline none
104 | 			background none
105 | 			font 14px Arial, sans-serif
106 | 			color #333
107 | 	&__spin
108 | 		position absolute
109 | 		top 0
110 | 		right 0
111 | 		width 32px
112 | 		height 14px
113 | 		border 1px solid #CCC
114 | 		border-bottom-color #B3B3B3
115 | 		border-radius 4px
116 | 		background linear-gradient(#FFF, #E6E6E6)
117 | 		box-shadow 0 1px 2px rgba(0,0,0,.1)
118 | 		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
119 | 		user-select none
120 | 		text-shadow 1px 1px #FFF
121 | 		cursor pointer
122 | 		&.minus
123 | 			top auto
124 | 			bottom 0
125 | 		&:hover
126 | 			background linear-gradient(#F6F6F6, #E6E6E6)
127 | 		&:active
128 | 			background #F5F5F5
129 | 			box-shadow inset 1px 1px 3px #DDD
130 | 		&:after
131 | 			content ''
132 | 			position absolute
133 | 			top 4px
134 | 			left 11px
135 | 			width 0
136 | 			height 0
137 | 			border-right 5px solid transparent
138 | 			border-bottom 5px solid #999
139 | 			border-left 5px solid transparent
140 | 		&.minus
141 | 			&:after
142 | 				top 5px
143 | 				border-top 5px solid #999
144 | 				border-right 5px solid transparent
145 | 				border-bottom none
146 | 				border-left 5px solid transparent
147 | 			&:hover
148 | 				&:after
149 | 					border-top-color #000
150 | 		&.plus
151 | 			&:hover
152 | 				&:after
153 | 					border-bottom-color #000
154 | 	&.focused .jq-number__field
155 | 		border 1px solid #5794BF
156 | 	&.disabled .jq-number__field,
157 | 	&.disabled .jq-number__spin
158 | 		border-color #CCC
159 | 		background #F5F5F5
160 | 		box-shadow none
161 | 		color #888
162 | 	&.disabled .jq-number__spin
163 | 		&:after
164 | 			border-bottom-color #AAA
165 | 		&.minus
166 | 			&:after
167 | 				border-top-color #AAA
168 | 
169 | .jq-selectbox
170 | 	vertical-align middle
171 | 	cursor pointer
172 | 	&__select
173 | 		height 32px
174 | 		padding 0 45px 0 10px
175 | 		border 1px solid #CCC
176 | 		border-bottom-color #B3B3B3
177 | 		border-radius 4px
178 | 		background linear-gradient(#FFF, #E6E6E6)
179 | 		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
180 | 		font 14px/32px Arial, sans-serif
181 | 		color #333
182 | 		text-shadow 1px 1px #FFF
183 | 		&:hover
184 | 			background linear-gradient(#F6F6F6, #E6E6E6)
185 | 		&:active
186 | 			background #F5F5F5
187 | 			box-shadow inset 1px 1px 3px #DDD
188 | 	&.focused
189 | 		.jq-selectbox__select
190 | 			border 1px solid #5794BF
191 | 	&.disabled
192 | 		.jq-selectbox__select
193 | 			border-color #CCC
194 | 			background #F5F5F5
195 | 			box-shadow none
196 | 			color #888
197 | 	&__select-text
198 | 		display block
199 | 		width 100%
200 | 	.placeholder
201 | 		color #888
202 | 	&__trigger
203 | 		position absolute
204 | 		top 0
205 | 		right 0
206 | 		width 34px
207 | 		height 100%
208 | 		border-left 1px solid #CCC
209 | 		&-arrow
210 | 			position absolute
211 | 			top 14px
212 | 			right 12px
213 | 			width 0
214 | 			height 0
215 | 			border-top 5px solid #999
216 | 			border-right 5px solid transparent
217 | 			border-left 5px solid transparent
218 | 	&:hover
219 | 		.jq-selectbox__trigger-arrow
220 | 			border-top-color #000
221 | 	&.disabled
222 | 		.jq-selectbox__trigger-arrow
223 | 			border-top-color #AAA
224 | 	&__dropdown
225 | 		box-sizing border-box
226 | 		width 100%
227 | 		margin 2px 0 0
228 | 		padding 0
229 | 		border 1px solid #CCC
230 | 		border-radius 4px
231 | 		background #FFF
232 | 		box-shadow 0 2px 10px rgba(0,0,0,.2)
233 | 		font 14px/18px Arial, sans-serif
234 | 	&__search
235 | 		margin 5px
236 | 		input
237 | 			box-sizing border-box
238 | 			width 100%
239 | 			margin 0
240 | 			padding 5px 27px 6px 8px
241 | 			border 1px solid #CCC
242 | 			border-radius 3px
243 | 			outline none
244 | 			background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNqU078LAXEYx/FzYfNzk5TJaFNKYjFYSQZ/hvwBsvg1UCY2xT9gM8hukQGThWRjkcFw3pdnujhfT736Xn2fPvfc3fd07V0OFDDFAnM0ENYsZRiGLSc9OpqIYIA9fMhhjCrW2h9VlMlcH/aymMGtOqEugX08PwQucUZKdTozMIqdTc9WepQD7wjY9ARx+ydwhfyXfS+S0qMcOEQJGcueB3VccFINdMgal6NzkmPjRwJXxDBB7/2RDdtAp6wb+dpphHDASG5QQ0V6u2aoSqBZD/lDrNWRJynLK2qpBn4rc6K2XB9/Nb8EGABtf1thzY6X2AAAAABJRU5ErkJggg==') no-repeat 100% 50%
245 | 			box-shadow inset 1px 1px #F1F1F1
246 | 			color #333
247 | 	&__not-found
248 | 		margin 5px
249 | 		padding 5px 8px 6px
250 | 		background #F0F0F0
251 | 		font-size 13px
252 | 	ul
253 | 		margin 0
254 | 		padding 0
255 | 	li
256 | 		min-height 18px
257 | 		padding 5px 10px 6px
258 | 		color #231F20
259 | 		&.selected
260 | 			background-color #A3ABB1
261 | 			color #FFF
262 | 		&:hover
263 | 			background-color #08C
264 | 			color #FFF
265 | 		&.disabled
266 | 			color #AAA
267 | 			&:hover
268 | 				background none
269 | 		&.optgroup
270 | 			font-weight bold
271 | 			&:hover
272 | 				background none
273 | 				color #231F20
274 | 				cursor default
275 | 		&.option
276 | 			padding-left 25px
277 | 
278 | .jq-select-multiple
279 | 	box-sizing border-box
280 | 	padding 1px
281 | 	border 1px solid #CCC
282 | 	border-bottom-color #B3B3B3
283 | 	border-radius 4px
284 | 	background #FFF
285 | 	box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
286 | 	font 14px/18px Arial, sans-serif
287 | 	color #333
288 | 	cursor default
289 | 	&.focused
290 | 		border 1px solid #5794BF
291 | 	&.disabled
292 | 		border-color #CCC
293 | 		background #F5F5F5
294 | 		box-shadow none
295 | 		color #888
296 | 	ul
297 | 		margin 0
298 | 		padding 0
299 | 	li
300 | 		padding 3px 9px 4px
301 | 		list-style none
302 | 		&:first-child
303 | 			border-radius 3px 3px 0 0
304 | 		&:last-child
305 | 			border-radius 0 0 3px 3px
306 | 		&.selected
307 | 			background #08C
308 | 			color #FFF
309 | 		&.disabled
310 | 			color #AAA
311 | 		&.optgroup
312 | 			font-weight bold
313 | 		&.option
314 | 			padding-left 25px
315 | 	&.disabled li.selected,
316 | 	li.selected.disabled
317 | 		background #CCC
318 | 		color #FFF
319 | 
320 | input[type="email"].styler,
321 | input[type="password"].styler,
322 | input[type="search"].styler,
323 | input[type="tel"].styler,
324 | input[type="text"].styler,
325 | input[type="url"].styler,
326 | textarea.styler
327 | 	padding 8px 9px
328 | 	border 1px solid #CCC
329 | 	border-bottom-color #B3B3B3
330 | 	border-radius 4px
331 | 	box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
332 | 	font 14px Arial, sans-serif
333 | 	color #333
334 | 
335 | input[type="search"].styler
336 | 	appearance none
337 | 
338 | textarea
339 | 	&.styler
340 | 		overflow auto
341 | 
342 | input[type="email"].styler:hover,
343 | input[type="password"].styler:hover,
344 | input[type="search"].styler:hover,
345 | input[type="tel"].styler:hover,
346 | input[type="text"].styler:hover,
347 | input[type="url"].styler:hover,
348 | textarea.styler:hover
349 | 	border-color #B3B3B3
350 | 	&:focus
351 | 		border-color #CCC
352 | 		border-top-color #B3B3B3
353 | 		outline none
354 | 		box-shadow inset 0 1px 2px rgba(0,0,0,.1)
355 | 
356 | button.styler,
357 | input[type="button"].styler,
358 | input[type="submit"].styler,
359 | input[type="reset"].styler
360 | 	overflow visible
361 | 	padding 8px 11px
362 | 	border 1px solid #CCC
363 | 	border-bottom-color #B3B3B3
364 | 	border-radius 4px
365 | 	outline none
366 | 	background linear-gradient(#FFF, #E6E6E6)
367 | 	box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
368 | 	font 14px Arial, sans-serif
369 | 	color #333
370 | 	text-shadow 1px 1px #FFF
371 | 	cursor pointer
372 | 	&.styler::-moz-focus-inner
373 | 		padding 0
374 | 		border 0
375 | 	&:not([disabled]):hover,
376 | 	/input[type="reset"].styler:hover
377 | 		background linear-gradient(#F6F6F6, #E6E6E6)
378 | 	&:active,
379 | 	/input[type="reset"].styler:active
380 | 		background #F5F5F5
381 | 		box-shadow inset 1px 1px 3px #DDD
382 | 
383 | button.styler[disabled],
384 | input[type="button"].styler[disabled],
385 | input[type="submit"].styler[disabled]
386 | 	border-color #CCC
387 | 	background #F5F5F5
388 | 	box-shadow none
389 | 	color #888


--------------------------------------------------------------------------------