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

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

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

  1. Андрей
    7 лет назад

    У меня глюк вылез с определением длины jq-selectbox__select похоже что он её берёт, основываясь на длине исходного селекта? или я чего-то недопонял? Кстати, за плагин спасибо!

  2. Александр
    7 лет назад

    На iPad одиночные селекты несколько странно работают:
    1. Кликаем на селект, список раскрывается, весь экран при этом немного затенятся
    2. Кликаем на пункте внутри раскрытого списка – пункт не выбирается, но затенение всего экрана снимается
    3. Кликаем на пункт – и только сейчас он выбирается

    • Автору надо либо где-то раздобыть эппловские устройства, либо увеличить размер/цвет букв в разделе “Недостатки”. :)

      Александр, поднимитесь чуть выше комментариев и прочитайте раздел “Недостатки”. У меня тоже был баг на iPhone при использовании плагина для селектов. Пришлось отказаться и кастомизировать select.

  3. Родион
    7 лет назад

    Было бы здорово, если бы автор создал опцию плагина не только для текста на кнопке выбора файла, но и для поля, где отображается название файла (.jq-file__name). Чтобы там по умолчанию был бы текст, например: “Нет выбранного файла”.

  4. Спасибо за плагин, очень помог.
    Но есть небольшая проблема в Opera:
    при клике по label на checkbox все работает, а когда клик происходит по самому input он вообще никак не реагирует?
    Подскажите в чем может быть проблема?
    Заранее благодарен.

    • Не знаю, у себя не наблюдаю такой проблемы. Проверял в Opera 12.15 и 17.

      • По макету у меня на input при клике стоит “галка” (я ставлю ее background)
        Думал проблема в этом, но нет даже используя идентичный вашему css проблема не уходит

      • Приветствую.
        Есть небольшая проблема в Opera:
        при клике по label на checkbox все работает, а когда клик происходит по самому input он вообще никак не реагирует или вообще пропадает?
        Проблему решил: просто поставил классу .jq-checkbox положительный z-index.
        Может кому поможет.

  5. Приветствую,
    вопрос: 2 select, второй изменяется в зависимости от 1го, добавил триггер, все ок. можно выбирать все подгружается – хорошо, но если выбрать строку по умолчанию, для того чтобы второй селект был disable ничего не происходит :( сам второй select получает disable, а вот класс disable не добавляется, в чем может быть проблема?
    надеюсь объяснил :)

  6. есть ли возможность указать parent елемент для селекта , проблема в том что при использевание его в popup окне с высотой проблемы?

    • Элементарно:

      <div class="parent"><select></select></div>
      • Я наверно плохо обяснил) простите, я имел в виду , что когда список в селект длинный , и находитса он в самом низу popup , изза того что у popub {overflow: hidden;} список обрезаетса при откритие и не открываетса вверх. Можно ли гдето указать ему (селекту), родителя body например? Извените за беспокойство, борюсь за жизнь етого плагина на проекте)

  7. Приветствую.
    Вопрос: в ie9 option не соответствует по ширине select (меньше на ширину прокрутки) и если кликнуть по центру select выпадает дефолтные option?
    Подскажите в чем может быть проблема?
    https://www.dropbox.com/sh/mki6wk9mf2k7p9f/2RRjDUgeug
    Заранее благодарен за ответ.

    • в ie9 option не соответствует по ширине select (меньше на ширину прокрутки)

      Что в IE9, что в других браузерах ширина одинаковая.

      если кликнуть по центру select выпадает дефолтные option

      Необходимо указать цветовой фон для .jq-selectbox__select перед указанием градиента, например: background: #FFF;, иначе в IE9 и ниже псевдоселект получается прозрачным, а поскольку прямо под ним спрятан оригинальный селект, вот по нему и происходит клик.

      Кроме того, нужно убрать margin у селекта:

      table.select-birth, .tabPersInfo select, .tabPersInfo input[type="text"] {
      margin: 0 0 0 4px;
      }

      Иначе, если кликнуть в 4 пикселей справа от псевдоселекта, вылазит оригинальный.

      • Спасибо за помощь!
        Все отлично, но в ie9 по-прежнему option не соответствует по ширине select (наблюдается у тех select, где есть прокрутка), в ie8 нормально.
        Какой-то он у меня “загадочный”.
        Еще вопрос по скрипту.
        При работе Ваш скрипт генерирует margin-top: 16 и 17px соответственно для оригинальных input radio и флажков.
        Получается они находятся под псевдофлажками и radio c opacity=0, но при клике по ним отрабатывают checked.
        То есть кликнул как на label, как на сам input, как под него сработает checked.
        Если ставишь margin-top: 0, то естественно оригинальные элементы уходят под псевдо и все нормально работает.
        Не очень удобно (или это у меня какой-то глюк)?

        • Все отлично, но в ie9 по-прежнему option не соответствует по ширине select (наблюдается у тех select, где есть прокрутка), в ie8 нормально.

          Вот мой скрин из IE9 – http://hkar.ru/l4i2

          При работе Ваш скрипт генерирует margin-top: 16 и 17px соответственно для оригинальных input radio и флажков.

          А вот с этим мне придется разобраться. Я сделал эти отступы, т.к. на моей демо-странице они только в этом случае оказываются под псевдоэлементами, а если оставить нулевой отступ, то вылазят вверх. Значит решение не универсальное.

  8. Спасибо за замечательный Form Styler.

    Я обнаружил, что если ставить значения width для селект кнтри HTML по средствам style, тогда jq-selectbox__select-text не правильно устанавливает ширину? Я прав или это недоработка? Как лучше с этим иметь дело, если есть нужна в HTML устанавливать свою ширину для каждого select? Есть возможность добавить поддержку чтения ширины из HTML?

    • Покажите пример. Ширина, которую укажите для select, должна быть такой же и для .jq-selectbox__select.

      • Вот пример на jsFiddle:

        jsfiddle.net/k2Ar4/

        HTML такой же как и у меня. Ваш код немного был изменен, но это не можнт влиять на результат. Я вынужден был измеить название селектора и название функции инит. Обрезается в jsFiddle так же как и у меня. В чем тут проблема?

        • Ширина абсолютно одинаковая, что у оригинального, что у псевдоселекта – http://hkar.ru/l6zg

          На счет “обрезается” не понял.

          • Посмотрите на поля “Упорядочить”, “Отображать” и “По”. Все значения обрезаются, хотя ширина селекта на много больше и однозначно вместила бы данные слова. Когда открываешь Firebug, то станоится понятно что selectbox__select-text не правильно определяет ширину и обрезает текст который мог бы вместиться! Если поставить для selectbox__select-text width:160%, то тогда все вмещается, но это не совсем правильно и так же в некоторых ситуациях вызвалоб проблемы!

            Как сделать, чтобы размер поля которое содержит selectbox__select-text ровнялся бы размеру select – selectbox__trigger-arrow.

            Может быть вы это уже сделали? Но дело в том, что мне пришлось уменьшить ширину selectbox__trigger-arrow

            • Ваш пример смотреть невозможно, т.к. вы в хтмл-код вставили код, который генерируется плагином, поэтому селекты вообще не работают.

              • Dimox, да дело не в том что они работают или нет! Вопрос то не в этом!? Как я и написал выше текст внутри селекта, тот что selected? не показывается полностью. Посмотрите, там видно “Возрастани”, “Актив” и “Вс” внутри. Но ширина селекта больше намного чем ширина внутреннего selectbox__select-text. Он не 100%

  9. Подскажите, как реализовать следующее. Есть чексбоксы, которые отвечают за размер одежды т.е.
    42, 43, 44
    как сделать так чексбокс скрытый, а label работает, т.е. нажали на label вокруг него появился border

  10. Евгений
    7 лет назад

    Имеется ли функционал сброса выбранного значения мультиселекта при нажатии reset на форме?

  11. Dimox, можно ли как-нибудь отключить стилизацию выпадающего списка в select’ах? Чтобы он стилизовывался стандартными стредствами браузера?

  12. Выложил новую версию – доработаны чекбоксы и радиокнопки.

  13. Здравствуйте.
    Поставил новую версию.
    В Opera версии12.16 при клике по label checkbox пропадает,
    при клике по cледующему label для input radio он срабатывает только при двойном клике?
    https://www.dropbox.com/sh/mki6wk9mf2k7p9f/2RRjDUgeug
    Подскажите в чем может быть проблема?
    Заранее благодарен.

    • Тут вообще какая-то мистика. Если удалить все три селекта после “Date of Birth”, то проблема исчезает. Никакой логики в этом не нахожу.

      И ни в одном другом браузере, кроме как в старой Опере, такой проблемы нет.

  14. Евгений
    7 лет назад

    Селект очень легко подцепился в drupal 7, но никак не могу понять, можно ли менять дизайн скролла?

    • В моем плагине это не предусмотрено и не будет. Можно попробовать задействовать сторонний плагин, например, jscrollPane. Здесь рассказано, как его прицепить. Только у меня, почему-то, не получилось.

  15. как то неправильно стали вести себя радио инпуты, они все стают активными, но должна быть только одна активна в группе. У Вас на демо они также себя ведут

  16. Приветствую.
    У меня в форме по клику на “+” увеличивается количество input и select, но проблема в том, что клонированные select неактивные.
    https://www.dropbox.com/s/ny07i0l003tpr92/Test.zip
    Что нужно, чтобы активировать их?
    Воспользоваться триггером, если да, то как?
    Заранее благодарен за ответ.

  17. День добрый. http://i.shotnes.com/a/30/zuy5yfbt.u0p_5270dbaee5859.png , если положение экрана не в самом верху, то высота дропбокса определена не правильно и селект обрезается. Как вылечить?

  18. Приветствую.

    При изменении размера окна браузера, триггеры select меняют свое местоположение (для примера Селект, имеющий пункт с длинным текстом).

  19. Вроде написано:

    v1.3.4 (03.03.2013)
    Исправлено: не работало выделение в мультиселекте в Internet Explorer 8-й и ниже версиях.

    Но у меня в IE8 как-то совсем всё плохо. Корректно почти ничего не работает, кроме текстовых полей. На мультиселектах вообще браузер завис. Грусть-печалька.

  20. Добрый день!
    Помогите, пожалуйста!
    У меня следующая проблема
    Есть 2 селекта, использую ваш плагин.
    Выбирая в списке select первого какой-либо элемент, должен выходить в зависимости от выбора определенный перечень элементов на втором селекте, который тоже отображен на странице.
    Без плагина – всё работает
    С плагином – не работает.
    Использую старую версию плагина
    https://dimox.name/styling-select-boxes-using-jquery-css/

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