Часто новички сталкиваются с проблемой оформления выпадающего списка. Так как с оригинальным 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

Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.

Итак, не будем долго рассуждать, перейдем сразу к делу

HTML

Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover , то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.

CSS

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

/*Сбросим отступы*/ .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 .

Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

Выпадающий список в HTML можно сделать при помощи тега select . Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

Электроник Сыроежкин Чижиков Кукушкина

Здесь с помощью тега option задаются элементы списка.

Результат применения:

Электроник Сыроежкин Чижиков Кукушкина

Атрибуты тега SELECT

Рассмотрим атрибуты тега select :

• name
• size - число отображаемых строк в списке (число);
• multiple - включает функцию множественного выбора элементов выпадающего списка;
• disabled - блокирует доступ к элементу;
• form - позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

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

Атрибуты тега OPTION

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

• disabled - устанавливает запрет на выбор данного элемента списка;
• label - позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
• selected - текущий пункт списка будет выбран по умолчанию;
• value - значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option :

Господин Электроник Сыроежкин Чижиков Кукушкина

Выглядеть результат приведенного примера будет следующим образом:

Господин Электроник Сыроежкин Чижиков Кукушкина

В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье:

За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown ), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

1. Настраиваемый список

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

2. Сделанный на CSS3/JavaScript

Написан на CSS3 и JavaScript. Обычный выпадающий список.

3. Стиль: станции метро

Прозрачный выпадающий список со стилистикой станций метро.

4. Dropy. Написанное на SCSS & jQuery

5. Для длинных выдающих списков

Отличное решение для длинных выпадающих меню.

Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.

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

8. Стильное меню настроек пользователя

9. CSS3 выпадающий список

Сделано в стиле UI, подойдет под UI стилистику сайта.

12. Выбор флага

Dropdown в стиле выбора страны.

13. Обычный HTML, CSS dropdown

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.

Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список:

Green Yellow Black

• Выпадающий список создается с помощью тега ;
  Внутри тега
  определяются варианты для выбора с помощью тега ;
• В теге можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.

Также можно задать класс 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