jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 603)

  1. А опция для задания текста по умолчанию для select?

  2. Отлично Дима!
    Очень рад, что ты нашёл время объединить плагины в один. Я даже уже знаю, где это всё применить, как раз проект на подходе к вёрстке классный. Потом покажу обязательно, но это не скоро будет, возможно в следующем году уже.

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

    Лукавишь )))) или base64 не считается картинкой ? ))

  3. А как же дерево флажков,в котором потомки зависят от родителей? Ведь удобно же для той же админки.

    Это нестандартное для веба поведение, которое осуществляется только а js, дуvаю не составит труда дописать и плагин и реализовать это самостоятельно.

    Зачем в html добавлять лишний option? А потом еще и проверять на стороне сервера?

    в 90% случаев первый пустой option присутствует изначально, при генерации выпадающего списка движком. Ну и как бы это является предсказуемым и логичным поведением. Потому что если человек что-то выбрал, а потом хочет отменить выбор — у него должна быть такая возможность.

  4. Григорий
    7 лет назад

    А есть ли возможность к определенным select использовать отдельно оформление?

  5. Dmitry Mukhach
    7 лет назад

    А обычные input для ввода текста в этом же стиле как сделать?

  6. Интересно, а зачем такая конструкция:

    
    <span class="selectbox" style="display: inline-block; position: relative">
      <div class="select" style="float: left; position: relative; z-index: 10000">
        <div class="text">-- Выберите --</div>
        <b class="trigger"><i class="arrow"></i></b>
      </div>
      <div class="dropdown" style="position: absolute; z-index: 9999; overflow-y: auto; overflow-x: hidden; list-style: none; left: 0; display: none">
        <ul>
          <li>-- Выберите --</li>
          <li>Пункт 1</li>
          <li>Пункт 2</li>
          <li>Пункт 3</li>
        </ul>
      </div>
    </span>
    

    не правильнее ли было бы так:

    это валидно по крайней мере и с

    display: inline-block;

    имеет больше прав на существование

    • поправка. не правильнее ли было бы так:

      
      <div class="selectbox" style="display: inline-block; position: relative">
        <div class="select" style="float: left; position: relative; z-index: 10000">
           ...
        </div>
      </div>
      
      • Я сделал так для поддержки старых версий IE. IE7 и ниже не понимают свойство display: inline-block для блочных элементов, поэтому, чтобы не писать для него костылей, я поставил span вместо div.

        А валидация здесь не важна, т.к. это JavaScript.

        • А валидация здесь не важна, т.к. это JavaScript

          с этой стороны конечно верно, но некрасиво

          однако если выбирать красоту кода и поддержку, то я с вами соглашусь, лучше див в спане :)

  7. Виталий
    7 лет назад

    Подскажи пожалуйста как задать ширину селекта в пикселях? Если их несколько на странице и каждому нужна разная ширина

  8. Возникла проблема с функцией click по чекбоксу, укажите куда копать.
    стандартно click не реагирует на стилизированные чекбоксы, приходться изощрятся click на span.checkbox, но тогда почему-то не срабатывает .live …

  9. Сергей
    7 лет назад

    Не могу словить клик по радио кнопке, в стандартном работает, а с плагином нет:
    как я это делаю:

    $(‘input[name=»text»]’).click(function() {
    var radio = $(‘input[name=»text»]:checked’).val();
    console.log(radio);
    });

    Спасайте :) оч. нуна

  10. Можно ли росчитывать на скорейшее решение?, или искать другой плагин, мне нужно сдать заказчику красивости.

  11. Для селектов не хватает перемнной, задающей z-index, а то получается селекты показываются поверх попап окошек, отправил правки на git https://github.com/Dimox/formStyler/pull/1

  12. А у меня что то вообще со стилями все поехало, не могу понять что такое? теперь и стиль и радио кнопки отдельно друг от друга

  13. Дмитрий, здравствуйте. В Вашем дэмо примере не работает переход стрелками вверх на радио кнопках в браузере Chrome.

  14. А именно с радио кнопки обернутую в label вместе с текстом, на кнопку привязанную к label.

    • Я знаю об этом. То же самое и в Firefox. Пытался решить эту проблему, но не смог. При этом в Opera и Internet Explorer такой проблемы нет.

      Поэтому непонятно, то ли я что-то неправильно сделал (но по логике у меня все правильно), то ли это баг браузеров Chrome и Firefox.

  15. Очень понравился плагин, но столкнулся с некоторыми проблемами…
    Как изменить размер отдельного select
    Как включить отображение select multiple, что бы он не использовался formstyler

    • Все элементарно.

      Как изменить размер отдельного select

      Смотрите здесь.

      Как включить отображение select multiple, что бы он не использовался formstyler

      Добавьте к стилизуемым селектам отдельный класс, и укажите их в код из 3-го пункта.

  16. Дмитрий, здравствуйте. Ещё всплыла одна проблема с radio. Если на странице есть несколько форм с radio кнопками, то если выбрать в одной из форм radio кнопку то с остальных снимаются кнопки.

  17. Можно ли данный плагин исползовать если на странице имеется несколько селектов с разной заданной шириной?
    Если да, то как реализовать даный момент?

  18. Подскажите. Мне необходимо сделать связанные select’ы (что бы при выборе в одном, изменялись значения в другом). В java не силен. Нашел готовый скрипт, который изменяет эти значения в select’ах — (немного доработал для себя) работает, но при использовании Вашего скрипта маркированный список остается старым. (то есть значения в Select’ах меняются значения, а в ul li нет).
    Это как то можно реализовать ?

    • Пример.

      В данном примере я сделал так, что, если в первом селекте выбрать «Пункт 3», то во втором выбирается «Пункт 5».

      • Не совсем это имел ввиду. Как изменять наполнение второго select при изменении первого?
        Например:
        Первый: «Автомобили, Посуда, Другое».
        Выбираем «Автомобили» — во втором список выпадающий состоит из: «Ford, Audi, BMW».
        А если выбрать в первом «Посуда», то список во втором изменится на: «Вилки, Ложки, Тарелки».

        • Как вариант сделать 3 селекта (исходя из вашего примера). 2-й и 3-й по умолчанию скрыть. И при изменении 1-го селекта показывать соответственно 2-й или 3-й.

          • В своем комментарии я написал что это просто пример.
            Да при условии что Select’ов 2-3 и в первом всего 3 значения, вариант более чем хороший, но что делать если select’ов 5. При этом в первом 12 значений и в зависимости от выбора в нем изменяются списки в остальных 4-ех. Тогда таких скрытых селектов потребуется сделать целую кучу. А если учесть, что исходя из выбранных значений в селектах должны производится рассчеты, получается совсем сложно.

  19. Планируете ли Вы сделать стили под прокрутку ?

Ваш комментарий