Тег позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега , который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге , а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега , который должен быть вложен в контейнер . Если планируется отправлять данные списка на сервер, то требуется поместить элемент внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Синтаксис Пункт 1 Пункт 2 Атрибуты Позволяет перейти к списку с помощью некоторого сочетания клавиш. Устанавливает, что список получает фокус после загрузки страницы. Блокирует доступ и изменение элемента. Связывает список с формой. Позволяет одновременно выбирать сразу несколько элементов списка. Имя элемента для отправки на сервер или обращения через скрипты. Список обязателен для выбора перед отправкой формы. Количество отображаемых строк списка. Определяет последовательность перехода между элементами при нажатии на клавишу Tab Закрывающий тегОбязателен.
HTML5 IE Cr Op Sa Fx
Тег SELECT
Выберите героя Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
1. Пример обычного HTML списка- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
Присвоим тегу
- класс
treeline для создания соединительных линий каждого раздела списка.
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
-
+База знаний /* Блок раскрытия списка */
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
-
+База знаний /* Блок раскрытия списка */
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Выпадающий список создается с помощью тега ;
- Внутри тега определяются варианты для выбора с помощью тега ;
- В теге можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.
- Google Plus
- ВКонтакте
- RSS
- /* Присваиваем класс treeline */
К предыдущей разметке добавляем + для реализации функции раскрытия элементов древовидного списка.
К CSS из предыдущего примера необходимо дописать следующие стили:
Treeline .drop { position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ font-size: 78%; /* Размер +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; } .treeline li:last-child > .drop {margin-left: 1px;} .treeline .drop + ul {display: none;} .treeline .dropM + ul {display: block;}
Скрипт, реализующий функцию раскрывающегося спискаПомимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:
$(function() { var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i < ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();
Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега .
4. Пример вертикального древовидного списка- /* Присваиваем класс treevertical */
Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список:
Green Yellow Black
Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили с помощью CSS / CSS3 и фреймворка Bootstrap .
Пример создания простого выпадающего спискаВ этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
5 10 15 20 25
Использование атрибута valueКак упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Посмотреть онлайн демо-версию и код
Для тега используется следующий код:
Maroon Green Yellow Blue Red
Пример получения доступа к выбранному варианту в JavaScriptТеперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML используется следующий код:
Maroon Green Yellow Blue Red Other
Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта :
var seltheme = document.getElementById(“selcolor”).value;
При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQueryНа этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега следующий:
Maroon Green Yellow Blue Red
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
var selectedcolor = $("#jqueryselect option:selected").text();
Также можно получить доступ к значению с помощью JQuery-метода $.val() :
var selectedcolor = $("#jqueryselect").val();
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.
Пример получения значения в скрипте PHPВ этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:
Посмотреть онлайн демо-версию и код
Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:
Select A Color: Maroon Green Yellow Blue Red
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .
Определение стилей выпадающего списка с помощью CSSТеперь рассмотрим, как определить стили выпадающего списка , используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 :
Посмотреть онлайн демо-версию и код
Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:
Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; }
Закругленные углы с помощью свойства border-radiusДля HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :
Посмотреть онлайн демо-версию и код Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .
Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.
Итак, не будем долго рассуждать, перейдем сразу к делу
HTML Поделись записьюЯ сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover
, то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.
Для начала рассмотрим базовые стили выпадающего списка. Я старался комментировать каждую строку кода, чтобы было понятнее:
/*Сбросим отступы*/ .droplink ul,.droplink h3,.droplink h3 a{ padding:0;margin:0 } /*Базовая обертка*/ .droplink { width:200px; position:absolute; margin:10px 0 0 25px } /*Стиль блока при наведении*/ .droplink:hover{ height:auto; background-color:#3E403D; border:solid 1px #3A3C39 } /*Заголовок в обычном состоянии*/ .droplink h3 a{ text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none } .droplink h3 a img{border:none} /*Стиль для заголовка при наведении*/ .droplink:hover h3 a { color:#FFF; font-weight:bold; position:absolute }
Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:
/*Скрываем список без наведения*/ .droplink ul{ list-style:none; display:none } /*Отображаем список при наведении*/ .droplink:hover ul{ display:block; margin-top:40px } .droplink li{display:block}
Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:
/*Стиль элемента списка*/ .droplink li a{ padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position: 10px 3px } /*Стиль элемента при наведении*/ .droplink li a:hover{ background-color:#999 } /*Иконки*/ .facebook a {background-image:url("icons/facebook.png")} .twitter a {background-image:url("icons/twitter.png")} .vk a {background-image:url("icons/vk.png")} .rss a {background-image:url("icons/rss.png")} .gplus a {background-image:url("icons/gplus.png")}
Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».
Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index .
Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>
Часто новички сталкиваются с проблемой оформления выпадающего списка. Так как с оригинальным select особенного ничего не сделаешь. Тогда на помощь приходит jQuery , и тогда можно сделать чуть ли не что угодно.
А что если я скажу, что можно и стандартный HTML выпадающий список не плохо оформить на чистом CSS ?
Выпадающий список на HTMLЦвет фона и текста можно менять, причем делается это очень просто.
Sherlock Holmes The Great Gatsby V for Vendetta The Wolf of Wallstreet Quantum of Solace
В span мы добавили 2 класса, один основной, на который ляжут все основные стили “custom-dropdown “, а второй big, который будет определять размер выпадающего списка . Мы можем заранее подготивить скажем 3 размера, big, medium, small , задать в стилях font-size . И в дальнейшем не заморачиваться. Это можно и пропустить, все зависит от вашего дизайна на сайте.
Body { background: #2a2a2b; color: #fff; text-align: center; font-family: Arial, Helvetica; } .big { font-size: 1.2em; } /* Custom dropdown */ .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; margin: 10px; /* demo only */ } .custom-dropdown select { cursor:pointer; background-color: #2980b9; color: #fff; font-size: inherit; padding: .5em; padding-right: 2.5em; border: 0; margin: 0; border-radius: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: button; /* hide default arrow in chrome OSX */ } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -.5em; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; } .custom-dropdown select { color: rgba(0,0,0,.3); } .custom-dropdown select::after { color: rgba(0,0,0,.1); } .custom-dropdown::before { background-color: rgba(0,0,0,.15); } .custom-dropdown::after { color: rgba(0,0,0,.4); }
Если вы не хотите заморачиваться и изучать стили, а просто добавить себе на сайт и поменять цвет под дизайн вашего сайта. То вам всего лишь в стиле “.custom-dropdown select ” нужно поменять значения background-color и color