Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Css выпадающий список: Как создать выпадающее меню

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Строчные элементыФормы

  • Поле со списком

Тег HTML выпадающий список

Рейтинг: 4 из 5, голосов 25

28 декабря 2019 г.

Тег <select> в HTML используется для создания выпадающего списка в HTML форме.

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

Пункты в HTML списке select можно группировать с помощью тега <optgroup>. Название группы не доступно для выбора, служит для удобства пользователей.

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Поддержка браузерами

Тег
<select> Да Да Да Да Да

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

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
disabled не указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
form id формы

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
multiple не указывается / multiple

Логический атрибут.

Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
name текст

Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
required не указывается / required

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size число

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.

Тег <select> также поддерживает глобальные HTML атрибуты.

by Lebedev

Как настроить выпадающий список с помощью CSS

Знакомо ли вам чувство, которое вы испытываете, когда тратите несколько часов на то, чтобы все выглядело идеально, только для того, чтобы быть побежденным браузером! Позволь мне объяснить. Итак, мой день начался с тестирования страницы, которую я создавал для веб-сайта клиента. И что это, когда я заметил проблему. В то время как это конкретное *раздражение* осталось бы незамеченным неопытным глазом, мои очки дизайнера пользовательского интерфейса сразу же заметили это.

Проблема заключалась в том, что в разных браузерах поле выбора отображалось по-разному. Я знаю, что это не недавняя проблема. Дело в том, что каждый браузер отображает поле по-своему. Firefox — худший (в данном случае)… худший! И эта непоследовательность была темным пятном на моем творчестве.

Итак, прервём драму 😀 . Следующее, что я сделал, очевидно, попытался решить эту проблему. Погуглив об этом. Я не был готов так легко победить. Некоторые форумы предлагали мне использовать свойства -moz-appearance или -webkit-appearance , но я не смог найти действительно работающее решение.

Теперь я знал, что мне нужен CSS, который я должен правильно использовать для решения этой проблемы. Но это было не очень очевидно, пока один из моих экспериментов не натолкнул меня на мысль.

Если не можешь изменить… Спрячь!

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

Я объясню это вам шаг за шагом.

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

 <дел>
    <дел>
       <выбрать имя="search_categories">

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

 .search_categories{
  размер шрифта: 13px;
  отступ: 10px 8px 10px 14px;
  фон: #fff;
  граница: 1px сплошная #ccc;
  радиус границы: 6px;
  положение: родственник;
}

Итак, вот что у нас будет:

2. Увеличение ширины раскрывающегося списка
Далее следует увеличить ширину раскрывающегося списка, чтобы часть списка фактически вне содержащего внешнего div. И это делается с помощью CSS, конечно. И пока мы это делаем, давайте также стилизуем раскрывающийся список. И у вас есть полная свобода стилизовать его так, как вам нужно.

 .search_categories .select{
  ширина: 120%;
}
.search_categories .выбрать выбрать{
  фон: прозрачный;
  высота строки: 1;
  граница: 0;
  заполнение: 0;
  радиус границы: 0;
  ширина: 120%;
  положение: родственник;
  z-индекс: 10;
  размер шрифта: 1em;
}

Вот что у нас получится:

3. Скрыть кнопку раскрывающегося списка


Последний шаг — уменьшить ширину списка, просто спрятав его с помощью CSS. Ты знаешь, что тебе здесь делать! Просто добавьте переполнение: скрыто в класс search_categories .

4. Улучшить внешний вид
О да! Я почти забыл. Таким образом, поле может не отображаться в виде списка для пользователей из-за скрытой кнопки раскрывающегося списка. Таким образом, чтобы сделать поле интуитивно понятным раскрывающимся списком, последний шаг — немного изменить класс select и добавить фоновое изображение стрелки.

 .search_categories .select{
  ширина: 120%;
  background:url('arrow.png') без повтора;
  фоновое положение: 80% центр;
}

Готово!

Все CSS в одном месте…

Чтобы помочь вам, вот все CSS, которые я использовал, в одном месте!

 .search_categories{
  размер шрифта: 13px;
  отступ: 10px 8px 10px 14px;
  фон: #fff;
  граница: 1px сплошная #ccc;
  радиус границы: 6px;
  переполнение: скрыто;
  положение: родственник;
}
.search_categories .select{
  ширина: 120%;
  background:url('arrow.png') без повтора;
  фоновое положение: 80% центр;
}
.search_categories .выбрать выбрать{
  фон: прозрачный;
  высота строки: 1;
  граница: 0;
  заполнение: 0;
  радиус границы: 0;
  ширина: 120%;
  положение: родственник;
  z-индекс: 10;
  размер шрифта: 1em;
}

Как UX-разработчик, я хочу, чтобы все было идеально, даже если это потребует добавления дополнительного CSS. И хотя проблема не нарушала никакой функциональности, ее было важно исправить, чтобы улучшить взаимодействие с пользователем. Итак, хотя мой день начался плохо… он закончился хорошо, потому что я решил проблему 🙂 …. Итак, если вы ищете что-то похожее, попробуйте это и дайте мне знать, помогло ли вам это. Ваше здоровье!

  • Советы и рекомендации по WordPress
  • С тегами: CSS, раскрывающийся список

Поделиться:

  • Aruna V

Обратите внимание, что некоторые ссылки в этом блоге могут быть партнерскими ссылками. Это означает, что если вы продолжите покупать продукт, используя такую ​​ссылку, мы получим небольшую комиссию (без каких-либо дополнительных затрат для вас). Это помогает нам поддерживать блог и создавать бесплатный контент. Мы рекомендуем только те продукты, с которыми работаем или любим. Спасибо за Вашу поддержку!

Самый простой способ создать его для своего веб-сайта!

CSS

27 сентября 2022 г.

Линас Л.

4 мин Чтение

Выпадающее меню содержит список страниц и подстраниц. Пользователи могут получить доступ к его содержимому, щелкнув или наведя курсор на меню.

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

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

Загрузить полную памятку по CSS

Для этого руководства требуется текстовый редактор для создания файла HTML и CSS, содержащего код раскрывающегося меню. Как вариант, вы можете сделать это через Файловый менеджер вашей панели управления хостингом. В следующем руководстве по раскрывающемуся меню будет использоваться последний метод.

Шаг 1.

Создание файла с кодом HTML

Для начала создайте файл HTML для фактического содержания и синтаксиса раскрывающегося меню. Перейдите к диспетчеру файлов с панели управления hPanel и создайте новый файл с именем 9.0021 menu.html внутри каталога public_html .

Файл menu.html будет содержать элементы выпадающего меню – один родительский элемент с пятью пунктами меню. Каждое подменю будет перенаправлять пользователей на разные страницы вашего сайта.

Добавьте в файл menu.html следующий код:

Классы dropdown, mainmenubtn, и dropdown-child представляют разные элементы HTML. CSS будет использовать их для доступа к определенному элементу и изменения его дизайна.

Вот как будет выглядеть HTML-меню без каких-либо правил CSS:

Совет профессионала

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

Шаг 2. Добавление CSS и создание эффекта раскрывающегося списка

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

Создайте внутреннюю таблицу стилей в файле menu.html , поместив следующий код в элемент