Главная › 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=»radio»]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Алексей
    9 лет 4 месяца назад

    обнаружено 2 бага в версии 1.6.1
    1) Селект с замещающим текстом (placeholder)
    если кликнуть на селект и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадает
    строка 682
    2) Если селект находится внизу страницы, то scrollTop у «.jq-selectbox__dropdown ul» тоже прокручен вниз и первых элементов не видно.
    Чтобы это проследить нужно страницу прокрутить вниз, скролл поместить за 200px от низа браузера (добавить побольше option-в чтобы скрол был у списка)
    у себя на сайте это исправил так:
    onSelectOpened: function() {
    var ul = $(this).find(‘ul’);
    setTimeout(function(){ul.scrollTop(0)},1);
    }

    PS классный плагин, спасибо

  2. Алексей
    9 лет 4 месяца назад

    Здравствуйте Dimox спасибо большое за плагин
    Но есть проблема и непонимаю вообще как в таком плагине она может присутствовать, если инспектировать код то checked не ставится, ставится класс оболочке но checked не ставится, как так? в safari я инспектором проверял и в мозиле так же через файрбаг, подскажите пожалуйста в чем дело?

  3. Павел
    9 лет 4 месяца назад

    А есть ли деструктор?

  4. Дмитрий
    9 лет 4 месяца назад

    Добрый день, Dimox!

    Скачал ваш плагин, хотел использовать на своем проекте. Но не могу понять почему у меня не работают радио. Не переключается в одного на другой.

    Пример моего кода http://jsfiddle.net/wnesx8hw/2/

  5. Тим
    9 лет 4 месяца назад

    Уже голову сломал — почему так происходит???
    http://i.imgur.com/LOBA3Su.png

  6. Тим
    9 лет 4 месяца назад

    Спасибо, вроде разобрался… Этот overflow меня постоянно в ступор вводит))) Только теперь другая проблема, как сделать, что бы пункты в dropdown не переносились на другую строку? Пробовал nowrap и другие — не помогает… Уже и не знаю что ещё можно. Подскажите )
    http://i.imgur.com/tWP27ch.png

  7. Тим
    9 лет 4 месяца назад

    Перечитал все сообщения с первой страницы, но, так и не нашел ответа на свой вопрос.
    Суть проблемы: при выборе Страны, во втором селекте не отображаеются Регионы/Области.
    Вот как они отображаются:

    <div id="country_id">
<select name="country_id">
              <option value=""><?php echo $text_select; ?></option>
              <?php foreach ($countries as $country) { ?>
              <?php if ($country['country_id'] == $country_id) { ?>
              <option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
              <?php } else { ?>
              <option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
              <?php } ?>
              <?php } ?>
            </select>
</div>

    Пробовал подключить Ваш плагин вот так:

    <div id="zone_id">
<select name="zone_id">
            </select>
            <?php if ($error_zone) { ?>
            <span class="error"><?php echo $error_zone; ?></span>
            <?php } ?>
</div>

    Не получается… Подскажите решение.
    Спасибо.

  8. Тим
    9 лет 4 месяца назад

    Уважаемый Dimox, подскажите КАК мне два связанных селекта «подружить»?
    Очень нуна (мой код выше — в сообщении #1704)
    Уже как только не пробовал:

    <script>  
(function($) {  
  $(function() {  
  $('select').selectbox();  
  $('#country_id').change(function() {  
  $('#zone_id').trigger('refresh');  
  });
  })  
})(jQuery)  
</script>

    Ума не приложу…

    http://i.imgur.com/cGWUUmX.png

  9. Тим
    9 лет 4 месяца назад

    В общем, я отказался от этого плагина. Не знаю почему но со связанными (зависимыми) селектбоксами от работать отказывается. Тогда как, со всем остальным всё прекрасно работает.. Очень жаль, что никто не смог помочь((

    • Фарит
      9 лет 4 месяца назад / ответ на коммент Тим

      Вы просто не правильно используете.

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

      <script>   
(function($) {   
$(function() {   
$('select').selectbox();   
$('#country_id').change(function() {   
$('#zone_id').trigger('refresh');   
});  
})   
})(jQuery)   
</script>

      заменить на

      <script>   
(function($) {   
$(function() {   
$('select').styler();   
$('#country_id').change(function() {   
$('#zone_id').trigger('refresh');   
});  
})   
})(jQuery)   
</script>
  10. Максим
    9 лет 4 месяца назад

    Подскажите почему может не работать селект в iPhone. Не раскрывается просто. Display block и z-index не добавляются. В десктопе и на адройде все ок.

  11. Дмитрий
    9 лет 4 месяца назад

    Здравствуйте! Вопрос по производительности. Имею на странице примерно 30 селектов, в которых около 1000 значений. Их стилизация занимает 4-5 секунд, что совсем не годится. Возможно ли что-то сделать чтобы загрузка происходила быстрее? Если нет, то не подскажете ли более простые плагины с ограниченным функционалом (интересует изменение цвета опшенов, указание через css работает не во всех браузерах)? Спасибо

  12. Сергей
    9 лет 4 месяца назад

    Доброго времени суток, подскажите пожалуйста как быть —
    у меня есть оригинальный скрипт системы:

    {literal}<script language="javascript">
function usedefaultns() {
    jQuery(".domnsinputs").attr("disabled", true);
}
function usecustomns() {
    jQuery(".domnsinputs").removeAttr("disabled");
}
jQuery(document).ready(function(){
{/literal}{if $defaultns}usedefaultns();
{/if}
{literal}});
</script>{/literal}

    <li>
										<input type="radio" name="nschoice" value="default" id="nschoicedefault" onclick="usedefaultns()"{if $defaultns} checked{/if} /> 
										<label for="nschoicedefault">{$LANG.nschoicedefault}</label>
									</li>
									<li>
										<input type="radio" name="nschoice" value="custom" id="nschoicecustom" onclick="usecustomns()"{if !$defaultns} checked{/if} /> 
										<label for="nschoicecustom">{$LANG.nschoicecustom}</label>
									</li>

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

  13. Евгений
    9 лет 3 месяца назад

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

  14. Евгений
    9 лет 3 месяца назад

    Dimox
    С мультиселектом разобрался, появилась новая проблема, у меня сайт на движке DLE, и в нём используются доп поля, а так же установлен загрузчик фото и файлов из доп полей (модуль), так вот при подключении скрипта

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

    Не работает загрузчик фото, не открывается окно загрузки

  15. talgautb
    9 лет 3 месяца назад

    если кто-то вдруг захочет использовать данный плагин в rails:

    Используем плагин через rails-assets.org, который подружит bower плагин с bundler (кстати, у тебя какой-то не кошерный bower.json)

    Gemfile:

    source 'https://rails-assets.org' do
gem 'rails-assets-jquery.form-styler'
end

    Подключаем в application.js сам файл:

    //= require jquery.form-styler/jquery.formstyler

    И всё :)

  16. Михаил
    9 лет 3 месяца назад

    Здравствуйте.
    Плагин отличный, все супер. Вот только столкнулся с проблемой. У меня в селекте присутствует onclick в option

    <option onclick="location.href='/kratki'" value="Kratki (Польша)">Kratki (Польша)</option>

    Который при выборе производителя ведет на его страницу.
    А данный плагин не поддерживает данное свойство. Можно ли как-то дописать его, чтобы он onclick прибавлял в li. Например

    <ul><li><a href="#" onclick="location.href">текст</a></li></ul>
  17. павел
    9 лет 3 месяца назад

    Добрый вечер, есть небольшая проблема, а именно не передаются аттрибуты data-* у option. Есть следующий код:

    <select>
<optgroup label="name">
<option data-value="name1">name 1</option>
<option data-value="name2">name 2</option>
<option data-value="name3">name 3</option>
</optgroup>
</select>

    при таком формате аттрибут data-value не передастся в li, после запуска styler, а вот если убрать обертку из optgroup — то data-value передастся… Подскажите — это я не правильно что-то делаю или баг плагина?

    • Dimox
      9 лет 3 месяца назад / ответ на коммент павел

      Это недоработка в плагине. Я забыл добавить соответствующий код для данного случая. В следующей версии будет исправлено. Спасибо, что сообщили.

      Нужно всего лишь заменить эту строку:

      li = '<li' + dataJqfsClass + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';

      на такую:

      li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';
  18. Сергей
    9 лет 3 месяца назад

    Возможно отвечали, но все же — как принудительно сделать открывание вверх. У меня селект в футере и сам он не хочет вверх открываться.
    Спасибо.

  19. Di
    9 лет 3 месяца назад

    пример : Селект с шириной 200 пикселей, имеющий пункт с длинным текстом.

    не могу понять как сделать ширину дропдайна динамичной относительно самого широкого пункта, когда селект имеет заданную ширину.

    пишу как в примере

    — Выберите —
    Пункт 1
    Пункт 2
    Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом
    Пункт 4
    Пункт 5

    css:
    .jq-selectbox.width-200 {
    width: 200px;
    }

    но дропдаун всё равно шириной как задан селект 200px

  20. MytOffNax
    9 лет 3 месяца назад

    Подскажите пожалуйста, как стилизовать динамический select?

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