Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .
Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.
Не поддаются полной стилизации следующие элементы html-форм:
- раскрывающийся список ;
- флажок ;
- переключатель .
- поле для отправки файла .
Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.
Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.
Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).
Демонстрация работы плагинаНа вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.
Достоинства- При отключенном JavaScript отображаются стандартные селекты.
- Небольшой размер скрипта, примерно 4 килобайта.
- Работает в IE6+ и всех современных десктопных браузерах.
- Выводится внутристрочно.
- Легко поддается оформлению через CSS.
- Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
- Автоматически подстраивает ширину, если она не указана.
- Поддерживает прокрутку колесом мыши.
- Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
- Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
- Поддерживает атрибут «disabled».
- Работает и с динамически добавляемыми/изменяемыми селектами.
- Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
- Не поддерживает группировку элементов списка (тег ).
- Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.
Плагин недоступен, т.к. он уже не актуален.
jQuery-плагин «SelectBox Styler»Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012
Обновления 22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега . Подключение плагинаЕсли на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :
Сразу после jQuery подключите файл со скриптом:
(function($) { $(function() { $("select").selectbox(); }) })(jQuery)
Этот код поместите перед тегом после вышеуказанных файлов.
При динамическом изменении селектов необходимо запустить триггер refresh , например:
(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)
HTML-код после выполнения плагинаЕго структура выглядит следующим образом:
-- Выберите --
- -- Выберите --
- Пункт 1
- Пункт 2
- Пункт 3
Чтобы оформить селекты с помощью CSS, используйте следующие классы:
.selectbox | родительский контейнер для всего селекта |
.selectbox .select | селект в свернутом состоянии |
.selectbox.focused .select | фокус на селекте, когда нажата клавиша Tab |
.selectbox .select .text | вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей» |
.selectbox .trigger | правая часть свернутого селекта (условный переключатель) |
.selectbox .trigger .arrow | вложенный тег для переключателя (стрелка) |
.selectbox .dropdown | обертка для выпадающего списка |
.selectbox .dropdown ul | выпадающий список |
.selectbox li | пункт (опция) селекта |
.selectbox li.selected | выбранный пункт селекта |
.selectbox li.disabled | отключенный (недоступный для выбора) пункт селекта |
Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.
Подключите CSS файл в разделе head:
.. ..
Если вы захотите применить другую тему оформления, не забудьте скопировать CSS файл в папку проекта.
Применяем стиль к SelectПри использовании EasyDropDown.js, ваша разметка остаётся ясной и интуитивно-понятной. Вам нужно просто добавить обычный элемент select . Вы так же можете отключать данный элемент, присваивать лэйбл и обозначить элемент, который должен быть выбран по умолчанию.
Для стилизации элемента достаточно приписать к нему класс dropdown . Вот и пример:
Setting Option 1 Option 2 Option 3 Option 4 Option 5
Вот и всё, больше ничего вам не нужно. Теперь ваш элемент SELECT будет более симпатичным.
Если вам нужно изначально выделить какой-то элемент, воспользуйтесь атрибутом selected . В данном случае мы не рекомендуем использовать лэйбл, т.к. отображение может немного нарушиться.
... Option 2 ...
Вы так же можете отключить элемент, добавив атрибут disabled:
...
Выбор темыВ комплекте с плагином EasyDropDown.js поставляется 2 стилевые темы: Metro и Flat . Для того чтобы их подключить, воспользуйтесь HTML5 атрибутом data-attribute .
Для применения другой темы, внутри элемента SELECT напишите data-settings="{"wrapperClass":"theme-name"}" . Параметр theme-name может принимать значения: metro или flat . Примеры:
...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .
Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.
Не поддаются полной стилизации следующие элементы html-форм:
- раскрывающийся список ;
- флажок ;
- переключатель .
- поле для отправки файла .
Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.
Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.
Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).
Демонстрация работы плагинаНа вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.
Достоинства- При отключенном JavaScript отображаются стандартные селекты.
- Небольшой размер скрипта, примерно 4 килобайта.
- Работает в IE6+ и всех современных десктопных браузерах.
- Выводится внутристрочно.
- Легко поддается оформлению через CSS.
- Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
- Автоматически подстраивает ширину, если она не указана.
- Поддерживает прокрутку колесом мыши.
- Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
- Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
- Поддерживает атрибут «disabled».
- Работает и с динамически добавляемыми/изменяемыми селектами.
- Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
- Не поддерживает группировку элементов списка (тег ).
- Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.
Плагин недоступен, т.к. он уже не актуален.
jQuery-плагин «SelectBox Styler»Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012
Обновления 22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега . Подключение плагинаЕсли на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :
Сразу после jQuery подключите файл со скриптом:
(function($) { $(function() { $("select").selectbox(); }) })(jQuery)
Этот код поместите перед тегом после вышеуказанных файлов.
При динамическом изменении селектов необходимо запустить триггер refresh , например:
(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)
HTML-код после выполнения плагинаЕго структура выглядит следующим образом:
-- Выберите --
- -- Выберите --
- Пункт 1
- Пункт 2
- Пункт 3
Чтобы оформить селекты с помощью CSS, используйте следующие классы:
.selectbox | родительский контейнер для всего селекта |
.selectbox .select | селект в свернутом состоянии |
.selectbox.focused .select | фокус на селекте, когда нажата клавиша Tab |
.selectbox .select .text | вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей» |
.selectbox .trigger | правая часть свернутого селекта (условный переключатель) |
.selectbox .trigger .arrow | вложенный тег для переключателя (стрелка) |
.selectbox .dropdown | обертка для выпадающего списка |
.selectbox .dropdown ul | выпадающий список |
.selectbox li | пункт (опция) селекта |
.selectbox li.selected | выбранный пункт селекта |
.selectbox li.disabled | отключенный (недоступный для выбора) пункт селекта |
Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.
Soldatov NikolayСтилизация selectСтилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery Стилизация select
Структура будет стандартной
Слон Бегемот ЖирафЧтобы в select отображаемая строка была одна используем атрибут size со значением 1.
Стилизация для нашего селекта
-webkit-appearance : none ; -moz-appearance : none ; -ms-appearance : none ; appearance : none ; background : url ("path/img.png" ) no-repeat right center ; outline : 0 ;Получаем
Слон Бегемот Жираф
В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах . Что это за свойство читайте ниже.
Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size
Appearance CSSРеализовать нашу задачу помогло css3 свойство appearance
Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background
Стилизация select optionДля того чтобы стилизовать select option нам потребуется JavaScript
Выбрать HTML JavaScript PHP .select { display : block ; max-width : 215px ; width : 100% ; position : relative ; } .new-select { border : 1px solid #ced4da ; padding : 10px 15px ; cursor : pointer ; position : relative ; } .new-select__list { border : 1px solid #ced4da ; cursor : pointer ; position : absolute ; top : 45px ; left : 0 ; width : 100% ; } .new-select__list.on { display : block ; } .new-select__item span { display : block ; padding : 10px 15px ; } .new-select__item span :hover { color : #12b223 ; } .new-select :after { content : "" ; display : block ; width : 25px ; height : 25px ; position : absolute ; right : 9px ; top : 9px ; background : url("path-to-image") no-repeat right center / cover ; opacity : 0.6 ; -webkit-transition : all .27s ease-in-out ; -o-transition : all .27s ease-in-out ; transition : all .27s ease-in-out ; -webkit-transform : rotate (0deg ); -ms-transform : rotate (0deg ); -o-transform : rotate (0deg ); transform : rotate (0deg ); } .new-select.on :after { -webkit-transform : rotate (180deg ); -ms-transform : rotate (180deg ); -o-transform : rotate (180deg ); transform : rotate (180deg ); }Перед JavaScript-кодом должен быть подключен jQuery
$ (" .select " ). each (function () { const _this = $ (this ), selectOption = _this . find (" option " ), selectOptionLength = selectOption . length , selectedOption = selectOption . filter (" :selected " ), duration = 450 ; // длительность анимации _this . hide (); _this . wrap (" " ); $ (" " , { class : " new-select " , text : _this . children (" option:disabled " ). text () }). insertAfter (_this ); const selectHead = _this . next (" .new-select " ); $ (" " , { class : " new-select__list " }). insertAfter (selectHead ); const selectList = selectHead . next (" .new-select__list " ); for (let i = 1 ; i < selectOptionLength ; i ++ ) { $ (" " , { class : " new-select__item " , html : $ (" " , { text : selectOption . eq (i ). text () }) }) . attr (" data-value " , selectOption . eq (i ). val ()) . appendTo (selectList ); } const selectItem = selectList . find (" .new-select__item " ); selectList . slideUp (0 ); selectHead . on (" click " , function () { if ( ! $ (this ). hasClass (" on " ) ) { $ (this ). addClass (" on " ); selectList . slideDown (duration ); selectItem . on (" click " , function () { let chooseItem = $ (this ). data (" value " ); $ (" select " ). val (chooseItem ). attr (" selected " , " selected " ); selectHead . text ( $ (this ). find (" span " ). text () ); selectList . slideUp (duration ); selectHead . removeClass (" on " ); }); } else { $ (this ). removeClass (" on " ); selectList . slideUp (duration ); } }); });Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..
ИСХОДНИКИ
В уроке мы будем использовать HTML5 , по это создаем в первую очередь HTML разметку, которая имеет следующий вид:
Создаем для сайта элемент select | Демонстрация с сайта сайт
Сделайте Ваш выбор
Выберите продукт
Информационный блон по веб-дизайну
CMS+шаблоны, плагины
Интересные уроки по созданию сайтов
RSS новости нашего блога всегда рядом
Далее рассмотрим некоторые атрибуты, например атрибут data используются для объединения информации в элементах option. В них размещается иконка продукта и текстовое описание с форматированием. Оба этих пункта будут выводиться в нашей версии элемента select.
Теперь подключаем эффекты, jQuery проверяет элемент select , и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select :
Выберите продукт
- JavaScript + jQuery для начинающих в видеоформатепосмотреть видеопрезентацию
- PHP + MySQL для начинающихкупить
- WordPress - профессиональный блог за один деньскачать
- Joomla - профессиональный сайт за один денькупить
Наше меню будет строить неупорядоченный список с элементами li , которые представляют каждый пункт option из элемента select .
Теперь рассмотрим наш JavaScript , который будет осуществлять плавную анимацию нашего элемента:
$(document).ready(function(){ // Элемент select, который будет замещаться: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",{ width: select.outerWidth(), className: "tzSelect", html: "" }); var dropDown = $("
- ",{className:"dropDown"});
var selectBox = selectBoxContainer.find(".selectBox");
// Цикл по оригинальному элементу select
select.find("option").each(function(i){
var option = $(this);
if(i==select.attr("selectedIndex")){
selectBox.html(option.text());}
// Так как используется jQuery 1.4.3, то мы можем получить доступ
// к атрибутам данных HTML5 с помощью метода data().
if(option.data("skip")){return true;
}
// Создаем выпадающий пункт в соответствии
// с иконкой данных и атрибутами HTML5 данных:
var li = $("
- ",{
html: ""+
option.data("html-text")+""
});
li.click(function(){
selectBox.html(option.text());
dropDown.trigger("hide");
// Когда происходит событие click, мы также отражаем
// изменения в оригинальном элементе select:
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Привязываем пользовательские события show и hide к элементу dropDown:
dropDown.bind("show",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.addClass("expanded");
dropDown.slideDown();
}).bind("hide",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.removeClass("expanded");
dropDown.slideUp();
}).bind("toggle",function(){
if(selectBox.hasClass("expanded")){
dropDown.trigger("hide");
}
else dropDown.trigger("show");
});
selectBox.click(function(){
dropDown.trigger("toggle");
return false;
});
// Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,
// он будет спрятан:
$(document).click(function(){
dropDown.trigger("hide");
});
});
Теперь маленький нюанс, при создании нашего элемента, оригинальный элемент select сохраняется, он будет скрыт с помощью метода hide(). Это не мало важно, потому что все изменения отражаются и в нем.
Затем мы рассматриваем наши стили CSS, будем использовать CSS3 , задаем стили для нашего элемента:
#page{ width:490px; margin:50px auto; } #page h1{ font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") no-repeat; width:490px; height:36px; } #page form{ margin:20px auto; width:460px; } .tzSelect{ /* Контейнер для нового элемента select */ height:34px; display:inline-block; min-width:460px; position:relative; /* Предварительная загрузка фонового изображения для выпадающих пунктов */ background:url("../img/dropdown_slice.png") no-repeat -99999px; } .tzSelect .selectBox{ position:absolute; height:100%; width:100%; /* Установка шрифта */ font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; text-shadow:1px 1px 0 #EEEEEE; color:#666666; /* Использование множественных фонов CSS3 */ background:url("../img/select_slice.png") repeat-x #ddd; background-image:url("../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png");background-position:0 -136px, right -204px, 50% -68px, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; cursor:pointer; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded{ background-position:0 -170px, right -238px, 50% -102px, 0 -34px; color:#2c5667; text-shadow:1px 1px 0 #9bc2d0; }
В данном примере используется множество прозрачных изображений, которые накладывается один на одного. Множественные фоновые изображения поддерживаются в Firefox , Safari , Chrome и Opera . Для Internet Explorer и старых версий браузеров.
TzSelect .dropDown{ position:absolute; top:40px; left:0; width:100%; border:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 0 4px #111; -webkit-box-shadow:0 0 4px #111; box-shadow:0 0 4px #111; } .tzSelect li{ height:85px; cursor:pointer; position:relative; /* Использование множественных фонов CSS3 */ background:url("../img/dropdown_slice.png") repeat-x #222; background-image:url("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); background-position: 50% -171px, 0 -85px, 0 0; background-repeat: no-repeat, no-repeat, repeat-x; } .tzSelect li:hover{ background-position: 50% -256px, 0 -85px, 0 0; } .tzSelect li span{ left:88px; position:absolute; top:27px; } .tzSelect li i{ color:#999999; display:block; font-size:12px; } .tzSelect li img{ left:9px; position:absolute; top:13px; }
Используя box-sizing, нам необходимо присвоить ему значение border-box , этим мы предотвратим увеличение общей ширины, так как наши фрагменты размещаются внутри элемента. На этом все, наши улучшенные элементы выбора созданы, удачных Вам экспериментов.