Главная › 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. Алексей
    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 лет 3 месяца назад

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

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

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

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

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

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

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

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

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

    <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 лет 3 месяца назад

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

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

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

    i.imgur.com/cGWUUmX.png

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

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

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

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

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

      <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 лет 3 месяца назад

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

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

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

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

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

    {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?

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