В данном плагине я объединил 3 своих предыдущих jQuery-плагина, плюс добавил возможность стилизации полей для отправки файлов. Таким образом, он позволяет стилизовать с помощью CSS следующие html-элементы:

• раскрывающийся список <select>;
• флажок <input type="checkbox">;
• переключатель <input type="radio">;
• поле для выбора файла <input type="file">.

Демонстрация работы плагина

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

Достоинства

• Общее:
  • Простота оформления с помощью CSS.
  • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
  • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
  • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
  • Поддержка атрибутов checked, selected, disabled.
  • Атрибуты class, id, data-*, title, указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы (id передается с суффиксом, чтобы избежать дублирования).
  • Поддержка динамического добавления/изменения атрибутов class, id, data-*, title.
  • Поддержка сброса формы при нажатии на <input type="reset">.
  • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
  • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
  • Поддержка валидации HTML5.

• Для селектов:

  • Поддерживает атрибут multiple, т.е. позволяет выбирать несколько пунктов (мультиселект).
  • Поддерживает группировку элементов списка в селекте (тег <optgroup>).
  • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height, либо через опцию selectVisibleOptions).
  • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
  • Поддержка поиска по пунктам одиночного селекта.
  • Поддержка замещающего текста (placeholder).
  • Автоматически подстраивает ширину, если она не указана.
  • Поддерживает прокрутку колесом мыши.

Недостатки

• При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

  setTimeout(function() {
    $('input, select').styler();
  }, 100)
  

  Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

• В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.

Скачать

Подключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:

   <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
   

2. Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:

   (function($) {
   $(function() {
   
     $('input, select').styler();
   
   });
   })(jQuery);
   

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$('select').styler('destroy');

Динамическое изменение

При динамическом изменении элементов формы необходимо запустить триггер refresh, например:

$('button').click(function(e) {
  e.preventDefault();
  /* делаем чекбокс неактивным */
  $('input:checkbox').attr('disabled', true)
    /* обновляем состояние псевдочекбокса */
    .trigger('refresh');
});

При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger('refresh') необходимо запускать, используя setTimeout, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$('form').validate({
  invalidHandler: function() {

    setTimeout(function() {
      $('input, select').trigger('refresh');
    }, 1)

  }
});

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

Колбеки (callbacks)

Пример использования:

(function($) {
$(function() {

  $('input, select').styler({
    fileBrowse: 'Выбрать',
    singleSelectzIndex: '999',
    onSelectOpened: function() {
      // к открытому селекту добавляется красная обводка
      $(this).css('outline', '3px solid red');
    }
  });

})
})(jQuery)

История изменений

Находится здесь.