Главная › JavaScript

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

2614 комментариев

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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Смотрите также

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

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

  1. Kerny
    10 лет 10 месяцев назад

    зачем элементу с классом «.jq-selectbox__select», присваивается правило

    float: left;

    оно ни на что не влияет, зато ломает когда нужен тянущийся элемент hkar.ru/fwDz (меняем внешний размер, сам select тянется, внутренний блок «.jq-selectbox__select», не тянется, у него кончается фон и селект разбивается на две части. Решил проблему написав

    float: none !important;
  2. Владимир
    10 лет 10 месяцев назад

    А если мне необходимо изменить размер select`а в пикселях?
    Как это сделать? Если убираю в css width: 185px — селект ведет себя «неадекватно» — при наведении мыши меняются размеры.

  3. Владимир
    10 лет 10 месяцев назад

    Это логично :)
    Но когда 2−3-4 селекта на страницы и все нужны разных размеров, то это не выход.
    Принудительно задать размер в пикселях для каждого селекта не получается (

  4. Владимир
    10 лет 10 месяцев назад

    Если бы я понял как это делать — не спрашивал бы.
    В любом случае спасибо за ответ.

  5. Владимир
    10 лет 10 месяцев назад

    Я так сделал с самого начала.

    <select id=type>...</select>
    #type-styler {width: 200px}

    Только вот так

    <select id=type style="width: 200px">...</select>

    не работает.
    Я это имел в виду в первом своем вопросе.
    Ладно. Буду бегать в файл css для установки ширины селектов)

  6. гость
    10 лет 10 месяцев назад

    Спасибо за плагин!
    для я думаю стоит ввести ограничение на ввод только цифр.

  7. morfedor
    10 лет 10 месяцев назад

    Здравствуйте. Вопрос такой: как скрывать уже открытые select’ы при открытии другого?

  8. morfedor
    10 лет 10 месяцев назад

    Спасибо, но уже сам разобрался:
    343-ая строка скрипта: (добавил)
    .focus (function () {
    $('.jq-selectbox').removeClass ('focused opened').find ('.jq-selectbox__dropdown').hide ();
    selectbox. addClass ('focused');
    })

  9. Алекс
    10 лет 10 месяцев назад

    Здравствуйте.

    Подскажите пожалуйста, если используется этот код

    /* обновляем состояние псевдочекбокса */
      .trigger('refresh');

    как сделать что бы обновляемый чекбокс сначала показал картинку loading?

    • Dimox
      10 лет 10 месяцев назад / ответ на коммент Алекс

      Никак. В этом нет смысла, т.к. обновление происходит мгновенно.

    • Алекс
      10 лет 10 месяцев назад / ответ на коммент Алекс

      Извиняюсь, не чекбокс, а поле select
      как сделать что бы обновляемое поле select сначала показал картинку loading?

        • Алекс
          10 лет 10 месяцев назад / ответ на коммент Dimox

          Может я тогда не так описал проблему …
          Попробую ещё раз …
          Есть 2 поля: Страна и Город, при выборе страны — обновляется поле Город.
          Сейчас с обновлением всё в порядке, но нет никакой «метки"(loading), что поле Город обновилось, т. е. для пользователя не понятно что поле обновилось и там есть Города.
          Хотелось бы если не картинки, то может изменение цвета поля и что-то такое.

          Так же сейчас столкнулся с проблемой если подключать плагин jQuery-Validation-Engine , немного изменил Ваш плагин и стало работать, но проблема: если поле select обычное, то работает отлично, а вот если динамическое (как Старана → Город), тогда получается так: если не выбрать поле Страна и нажать «Готово», то появится подсказка, что поле Страна обязательное, тогда после выбора Страны, появляются 2 поля Город.
          Думаю что скорее всего проблема не в вашем плагине, а в плагине валидации, но может что-то подскажите?

  10. Роман
    10 лет 10 месяцев назад

    Подскажите, как сделать, что бы при нажатии на клавиши «вверх» или «вниз» не показывался стандартный select?

  11. Максим
    10 лет 10 месяцев назад

    Привет! Восхитительный плагин.
    Непонятны некоторые моменты:

    1. Некоторые атрибуты, например title, перестают действовать после навешивания на select.
    2. Например чтобы размеры самого select’a и выпадающего его списка совпадали, обязательно нужно переопределить 2 класса: .my-class .jq-selectbox__select и .my-class .jq-selectbox__dropdown?

    • Dimox
      10 лет 10 месяцев назад / ответ на коммент Максим

      Восхитительный плагин.

      Спасибо!

      1. Некоторые атрибуты, например title, перестают действовать после навешивания на select.

      Логично, потому что в плагине это не предусмотрено. Могу реализовать в следующей версии. Какие еще атрибуты, кроме title, нужно перенести?

      2. Например чтобы размеры самого select’a и выпадающего его списка совпадали, обязательно нужно переопределить 2 класса: .my-class .jq-selectbox__select и .my-class .jq-selectbox__dropdown?

      Да. Чтобы указывать только в одном месте (для .jq-selectbox__select), нужно у .jq-selectbox__dropdown ширину поменять на 100%, а border, border-radius и background перенести в .jq-selectbox ul. Пожалуй, внесу это правку в следующей версии, так будет лучше.

      • Максим
        10 лет 10 месяцев назад / ответ на коммент Dimox

        Логично, потому что в плагине это не предусмотрено. Могу реализовать в следующей версии. Какие еще атрибуты, кроме title, нужно перенести?

        Наверно все, которые присутствуют в оригинальном селекте. Просто перенести эти атрибуты в span-обёртку с классом jq-selectbox. Задачи разные бывают, могут попадаться и свои собственные атрибуты.

        Да. Чтобы указывать только в одном месте (для .jq-selectbox__select), нужно у .jq-selectbox__dropdown ширину поменять на 100%, а border, border-radius и background перенести в .jq-selectbox ul. Пожалуй, внесу это правку в следующей версии, так будет лучше.

        Спасибо, будем ждать =)

  12. Александр
    10 лет 10 месяцев назад

    Здравствуйте.
    Понравился Ваш плагин, однако при работе с file массив $_FILES на выходе пуст.

    Так же .name имеет прозрачный бэк изначально и может использоваться только на белом фоне)
    Я поменял для себя, но в вашем примере если сделать .menu, .section {background:none} прозрачность так же имеется в мультиселектах.

  13. Александр
    10 лет 10 месяцев назад

    Извиняюсь. Выше писал про массив. С ним всё хорошо :)
    Так же было обнаружено при замене .min на полный файл: «Обзор…» написан кракозябрами, ибо полный файл в кодировке utf8 а упрощенный в ansi.
    Поле файл по дефолту обрабатывается так
    http://www.nicewe.ru/file.png
    Поле заключено в div который имеет min-height:30px.
    FF 21.0

  14. alex
    10 лет 10 месяцев назад

    Добрый день,
    проблемка возникла что нужно сдделать что бы работало плагин работал с FancyBox, когда открываю модальное окно плагин не срабатывает (

  15. sergey
    10 лет 10 месяцев назад

    Добрый вечер. Помогите повесить

    onclick()

    на span. jq-radio, очень нужно, уже все перепробовал. При onclick () — отрабатывается, но с ошибками и с тормозами. А всего-то нужно сделать

    $('span.jq-radio').click(function() {$(this).prev().click('input')});
  16. Kerny
    10 лет 10 месяцев назад

    Было бы классно, если бы у такого замечательного плагина была еще страница build’а, где можно было бы выполнить сборку, например функционал только для стилизации

     <input type="checkbox" />

    Использую Ваш плагин во многих больших проектах, спасибо за проделанную работу!

  17. talgautb
    10 лет 10 месяцев назад

    я так понял текст при выбранной радио кнопки надо менять средствами скрипта? в css никак не предусмотрено?

  18. alex
    10 лет 10 месяцев назад

    Всем привет,
    подскажите пожалуйста
    код:

    <script>
         function submitForm1(abc)
     {
 alert (abc);    
     }
     </script>
     
 <input type="radio" id="PERSON_TYPE_11" name="PERSON_TYPE1" value="1" checked="checked" onClick="submitForm1('привет')">
 <input type="radio" id="PERSON_TYPE_115" name="PERSON_TYPE1" value="1" checked="checked" onClick="submitForm1('пока')">

    при onClick не срабатывает (

  19. Alex
    10 лет 10 месяцев назад

    На iPhone 4S в Safari отображает два селекта :(
    Если нужен Safari под Windows support.apple.com/kb/dl1531

  20. Василий
    10 лет 10 месяцев назад

    Подскажите, почему-то не присваивается класс «styler» для input типа text, password. Класс не присваивается и css код соответственно не цепляется.
    А для input checkbox и radio все нормально работает.

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