Главная › 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. Евгений
    10 лет назад

    Добрый день! Большое спасибо за плагин! А планируется ли реализация поддержки браузеров на мобильных телефонах, либо есть ли какой то способ включить поддержку мобильных устройств? Дело в том, что я хотел бы использовать ваш благин в мобильной версии сайта. Особенно мне нравится функция поиска по списку в селектах. У меня есть один селект где порядка 75 пунктов, и поиск по этим пунктам очень удобная функция, но она к сожалению работает только через браузер компьютера, при заходе через браузер мобильного, например через Safari на iOS, селект работает как стандартный селект, а именно jq-selectbox__dropdown не отображается, а открывается стандартный способ выбора пункта селекта как если бы плагин не был использован.

    • Dimox
      10 лет назад / ответ на коммент Евгений

      Не нужно обобщать мобильные устройства, потому что такая ситуация только в iOS.

      Дело в том, что я не знаю, каким образом в iOS спрятать стандартный выпадающий список, поэтому я его спрятал у стилизованного селекта, чтобы не дублировалось.

      Если найду решение, то конечно же сделаю, как положено.

  2. talgautb
    10 лет назад

    Было бы удобно если селектам добавлять классы по тому как они открываются вверх или вниз.

    • Dimox
      10 лет назад / ответ на коммент talgautb

      Для чего это может быть нужно?

      • Гость
        10 лет назад / ответ на коммент Dimox

        Собственно для оформления, вчера как раз допиливал эти классы, чтобы сделать вот такое. Если открывается вверх, то и стрелочка должна быть под выпадающим списком.

        Столкнулся с проблемой, что при назначении свойств селекту

        $('select').prop('disabled', true);

        плагин не подхватывает их. Посоветуете ли как победить?

  3. Дмитрий
    10 лет назад

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

    Решил попробовать поработать с Вашим плагином. Все отлично. За исключением одного момента. У меня на сайте два селекта (к примеру). Делаею выбор в первом, аяксом посылаю запрос, получаю ответ и вставляю внутрь второго селекта. Т. е. формирую для второго селекта динамически.

    После получения ответа и вставки во строй селект использую триггер refresh:

    				success: function(json) {
					jQuery('#s2').html(json);
					setTimeout(function() {
						jQuery('#s2').trigger('refresh');  
					}, 100) 					
				},

    Но почему-то обновляет значение только один раз. Второй уже не отрабатывает. НЕ подскажете в какую сторону копать?

    Спасибо.

  4. Dimox
    9 лет 11 месяцев назад

    Выложил новую версию — 1.5.3.

  5. Dimox
    9 лет 11 месяцев назад

    Выложил новую версию — 1.5.3.1.

  6. serzhei
    9 лет 11 месяцев назад

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

  7. Shift
    9 лет 11 месяцев назад

    Здравствуйте. Спасибо за отличный скрипт. Когда при развернутом списке нажимаешь кнопки вверх или вниз, он не прокручивается. В вашем примере это видно: dimox.github.io/jQueryFormStyler/demo/#select — «Селект с группировкой пунктов» (воспроизводится в FF23, Chrome, IE8). Также, если у селекта есть поиск, эти клавиши нефункциональны, потому что фокус всегда стоит на поле поиска.

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

    Здравствуйте!
    Отличный плагин! Но есть вопрос: как использовать 2 селекта на одной странице с разным стилями?

  9. talgautb
    9 лет 11 месяцев назад

    Кстати, можно еще стилизовать ползунок в селекте, а то что-то в разных браузерах он разный, в вин вообще не очень с скроллом ((
    на будущее, подумай)

  10. Dimox
    9 лет 11 месяцев назад

    Выложил новую версию — 1.5.3.2.

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

    Извиняюсь за немного нуюовский вопрос, но не могу решить задачку.
    Имеется форма отправляемая по технологии ajax без перезагрузки страницы:

    <form id="frm1" action="" method="post">
                                <select>
					<option>-- Выбрать --</option>
					<option>Опция 1</option>
					<option>Опция 2</option>
				</select>
<input class="styler" type="submit" name="btn" value="Отправить" />
</form>

    После того, как форма отправлена и получен результат ошибка или успех, пропадает обертка от select. Т. е. пропадает стилизация списка. Пытался использовать refresh, но результата не добился. Если не трудно, подскажите как с этим бороться.

  12. Гость
    9 лет 11 месяцев назад

    Столкнулся с такой проблемой, если селект находится на скрытой форме, то он (div.jq-selectbox__dropdown) не имеет ограничения по высоте, что крайне не удобно при количестве элементов 150+
    Можно это как-то исправить?

    • Dimox
      9 лет 11 месяцев назад / ответ на коммент Гость

      Высота выпадающего списка рассчитывается лишь тогда, когда псевдоселект видим. Поэтому, чтобы это работало, нельзя его скрывать через display: none. Найдите другой способ скрытия селекта, например, поместите в div в с нулевой высотой и overflow: hidden, либо что-нибудь подобное. Хотя я не уверен, что при этом все будет в порядке.

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

        Dimox, интересный момент.
        Можно стилизовать, а потом скрыть, наподобие:

        (function($) {
	$(function() {
		$('.styler').styler();
		$('#hide-me').hide();
	})
})(jQuery)

        И тогда обычный код с переключением блоков с стилизованными input’ами работает нормально.

    • Александр
      9 лет 11 месяцев назад / ответ на коммент Гость

      Задайте вашему начальному селекту id.
      Пример

      <select id="primer"></select>

      После обработки вашего селекта плагином на выходе id обертки селекта будет primer-styler.
      После этого можно принудительно задать нужную высоту средствами css исключительно для этого списка.

      #primer-styler ul {height:200px;}
  13. Дмитрий
    9 лет 11 месяцев назад

    Возникает проблема когда в select options с одинаковыми названиями. Он перестает реагировать на change

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

    Возникла такая проблема.
    Нужно вывести радиокнопки через маркированный список.

    <ul class="options">
<li><input type="radio" name="option" value="" /></li>
<li><input type="radio" name="option" value="" /></li>
<li><input type="radio" name="option" value="" /></li>
</ul>

    После стилизации они работают каждая по себе, а не в группе.
    Не в курсе как это исправить?

  15. Олег
    9 лет 11 месяцев назад

    cdn.joxi.ru/uploads/prod/2014/06/16/f2a/b6d/7a6e395d652b89461d9b0d8c92ff5f27dfa8f7b4.jpg

    При таком раскладе не хватает места для строки. Скрол перекрывает последние буквы

  16. Oleg
    9 лет 11 месяцев назад

    Есть ли возможность стилизовать чекбоксы и радиобоксы по своему?
    Предлложенные Вами не устраивают дизайнера. А картинки у вас формируются как-то странно, не могу найти, где их менять

  17. Олег
    9 лет 11 месяцев назад

    if (selCloneWidth == selectbox. width ()) {
    //divText.width (liWidth2);
    liWidth1 += selectbox. find ('div.jq-selectbox__trigger').width ();
    }
    Стоит убрать из скрипта эту непонятную конструкцию которая лишь портит ширину селекта магическим образом.

    • Dimox
      9 лет 11 месяцев назад / ответ на коммент Олег

      Нельзя, селект по умолчанию должен иметь ширину самого широкого пункта. На странице примеров на втором селекте (Селект без заданной ширины, имеющий пункт с длинным текстом) можно увидеть разницу при отключении этой строки.

      • Олег
        9 лет 11 месяцев назад / ответ на коммент Dimox

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

      • Олег
        9 лет 11 месяцев назад / ответ на коммент Dimox

        Нашел в чем баг с этим параметром!
        Когда у нас название опшена меньше чем ширина селекта у нас прописывается фиксированная ширина класса (jq-selectbox__select-text) по самому длинному названию.
        Далее если выберешь самое длинное название (Категория прайса) в списке и обновишь страницу (делать нужно в ФФ, он запоминает выбранный элемент из прошлого запроса) то ты увидишь что фиксированная ширина не установилась и наш селект ведет себя как должен, всегда подстраивается под самое длинное название.

        Если мы хотим от этого уйти то нам лишь необходимо задать размер селекта
        .jq-selectbox.(class-select) {width: 100px}

        То есть убрав //divText.width (liWidth2); мы добиваемся большей гибкости чем с ней. Наш селект всегда будет подстраиваться под длинное название, если это не нужно, то задаем ширину и наслаждаемся

  18. Alex
    9 лет 11 месяцев назад

    Замечательный плагин — но если элемент select использовать в модальном окне (jq dialog) — то «умная компоновка» выпадающего списка не работает (т.к. расчет координат ведется не от модального, а от основного окна). Подскажите пожалуйста решение.

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

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

    Ерунда какая-то. Последняя версия плагина, на страницу приходят аяксом radio

    Прописал:

    success: function(json) {
	jQuery('#type').html(json);
	setTimeout(function() {  
		jQuery('.ch2').trigger('refresh');  
		jQuery('.ch2').css({'border':'1px solid #FF0000'});  
	}, 2000)  
},

    Тишина, ничего не происходит. jQuery ('.ch2').css ({'border':'1px solid #FF0000'}); добавлен специально чтобы посмотреть отрабатывает ли таймаут. Ставил 1,5,1 — то же самое.

  20. Роман
    9 лет 11 месяцев назад

    Доброго дня! Помогите пожалуйста чайнику… никак не могу разобрать. Virtuemart 2.6 + Joomla 2.5.20.

    stroyprom.by/myshop/front-page/otdelochnye-materialy/gipsokarton-profilja.html

    Пытаюсь стилизовать select модуля Virtuemart 2 Multiple Customfields Filter 2 и привести его к общему знаменателю с выпадающим списком «Название товара +/-» (над товарами категории).

    перед тегом добавил:

    <script src="jqueryformstyler/jquery.formstyler.min.js"></script>
<script src="jqueryformstyler/jquery.formstyler.min.js"></script>
<script>  
(function($) {  
$(function() {  
  
  $('input, select').styler();  
  
})  
})(jQuery)  
</script>
<script>
(function($) {  
$(function() {  
  
  $('button').click(function(e) {  
    e.preventDefault();  
    /* делаем чекбокс неактивным */  
    $('input:checkbox').attr('disabled', true)  
      /* обновляем состояние псевдочекбокса */  
      .trigger('refresh');  
  })  
  
})  
})(jQuery)
</script>

    не работает. что-то нужно еще сделать? нашел файл, который отвечает за генерацию формы:

    <?php
defined('_JEXEC') or die('Restricted access');
/**
* Param Filter: Virtuemart 2 search module
* Version: 2.0.6 (2013.08.13)
* Author: Usov Dima
* Copyright: Copyright (C) 2012-2013 usovdm
* License GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
* http://myext.eu
**/

$custom_class = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' custom_child custom_child-'.(int)$custom_params['af'] : '';
$custom_pid = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' data-pid="'.(int)$custom_params['af'].'"' : '';
$custom_pval = isset($custom_params['av']) &amp;&amp; is_array($custom_params['av']) &amp;&amp; count($custom_params['av']) > 0 ? ' data-pval="'.implode(';',$custom_params['av']).'"' : '';

$html .= '<div class="custom_params custom_params-'.$type->virtuemart_custom_id.'">';
$tip = !empty($type->custom_tip) ? ' <span class="mcf_tip hasTip" title="'.$type->custom_tip.'">[?]</span>' : '';
$selected_values = JRequest::getVar('cv'.$type->virtuemart_custom_id, array());
$selected_values = array_diff($selected_values,array(''));
$reset = !empty($selected_values) ? '<a class="reset" href="#">[x]</a>' : '';
$html .= '<div class="heading">'.JText::_($custom_params['n']).$tip.$reset.'</div>';
if(!empty($customfield_value)){
	$html .= '<div class="values cv-'.$type->virtuemart_custom_id.$custom_class.'" data-id="'.$type->virtuemart_custom_id.'"'.$custom_pid.$custom_pval.'>';
	$html .= '<select name="cv'.$type->virtuemart_custom_id.'[]" rel="'.$type->virtuemart_custom_id.'">';
	$html .= '<option value="">'.$mcf_customfields_select_heading.'</option>';
	foreach($customfield_value as $v){
		$vid = $custom_params['ft'] == 'int' ? $v : $v->id;
		$value = $custom_params['ft'] == 'int' ? $v : $v->value;
		$counts = $custom_params['ft'] == 'int' ? $custom_int_count : $custom_text_count;
		$selected = !$param_search_ids_clear &amp;&amp; isset($selected_values) &amp;&amp; in_array($vid,$selected_values)? ' selected="selected"' : '';
		/* ----- + Count calculate ----- */
		$count = calcCount($counts,$vid);
		$count_sum += $count;
		$count_txt = $count_show ? ' ['.$count.']' : '';
		$count_show ? ' ['.$count.']' : '';
		$disabled = $count == 0 ? $count_zero_show_txt : '';
		$disable_css = $count == 0 ? ' '.$count_zero_show : '';
		/* ----- - Count calculate ----- */
		if($count_zero_show != 'hidden' || $count > 0){
			$html .= '<option value="'.$vid.'"'.$selected.$disabled.'>'.$value.$count_txt.'</option>';
		}
	}
	$html .= '</select>';
	$html .= '</div>';
}
$html .= '</div>';

    подскажите что нужно еще сделать плз. Спасибо.

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