select в HTML


Содержание

в HTML

Элемент используется для создания раскрывающегося списка.

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

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

Элемент
Да Да Да Да Да

Советы и примечания

Совет: Элемент является элементом управления Form и может использоваться в форме для сбора пользовательских данных.

Атрибут selected HTML тега option

Атрибут selected – атрибут-выключатель. Когда он присутствует, он определяет, что пункт списка является активным, т.е. заранее выбранным еще на этапе загрузки страницы.

Активный (выбранный) пункт отображается первым в выпадающем списке.

При помощи JavaScript атрибутом selected можно манипулировать и после того, как страница будет загружена.

В XHTML запрещено сокращать атрибуты, таким образом атрибут selected должен определяться как .

Пример использования атрибута

Выпадающий список с предвыбранным пунктом выбора:

Выпадающий список HTML

Выпадающий список в 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:

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

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

Стилизация элемента select на чистом CSS


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

Так выглядит код обычного выпадающего селекта.

И так он выглядит на практике в браузере.

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

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

Т.е. перед нами стоит задача кастомизировать две эти разновидности селекта.

Хочу пояснить, все же, в чем сложность стилизации рассматриваемого html-элемента. Посмотрите на приведенные мной примеры. То, как они выглядят, во многом зависит от используемой вами операционной системы. Браузер слабо влияет на их отображение. Вот почему стилизовать селекты такая сложная задача.

Итак, с этим мы разобрались. Осталось упомянуть, что всё рассматриваемое в данной статье исключительно для десктопа (компьютера). На смартфонах select выглядит совершенно иначе, необходимости изменять его внешний вид особой нет.Вот, например, как выглядит этот элемент в операционной системе Android (представлены соответственно селекты списка множественного выбора и простой селект).

Стилизация select списка множественного выбора

Итак, первым в нашем списке будет стилизация select с параметром multiple. Это не выпадающий список, а, как его называют, список множественного выбора.

Выглядит он довольно убого, какими был этот элемент на заре интернета, таким осталися и сейчас. Что же можно улучшить в его отображении?Если мы подумаем над этим вопросом, ответ дать не сложно :

  • во-первых отступы, потому что стандартные крайне малы,
  • во-вторых, хочется заменить стандартный синий цвет выделенного пункта.
  • Помимо этого, хотелось бы, чтобы присутствовал optgroup label — заголовок группы и более-менее одинаково отображался.

Как я уже упомянула, изменить цвет подсветки пунктов селекта с помощью стилей нельзя напрямую, но есть одна хитрость, благодаря которой изменить цвет все же можно. Для этого достаточно вспомнить свойство filter (которое содержит в себе целую группу так называемых css-фильтров), позволяющее применять различные эффекты к элементам, это размытие, обесцвечивание, сияние, гравюра, инвертирование цветов и т.п. Подробнее про них я писала в статье про обесцвечивание картинки. Из всего этого набора нас будет интересовать hue-rotate. Данное свойство задает оттенок в зависимости от величины угла цветового круга.

Задавая для пункта селекта этот фильтр можно добиться необходимого цвета подсветки. Формально цвет его остался прежним, задаваемым стандартно, а hue-rotate уже в свою очередь изменит отображение цвета на то, которое нам нужно.

Приведу пример рабочего кода для стилизации селекта.

Тег SELECT

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Тег Список множественного выбора Раскрывающийся список

Синтаксис

Параметры

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

Пример 1. Использование тега

Аргументы

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 2. Блокировка списка

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Параметр MULTIPLE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Наличие параметра multiple сообщает браузеру отображать содержимое элемента Параметр size отсутствует Параметр size равен 1

Синтаксис

Аргументы

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 3. Создание списка множественного выбора

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Параметр NAME

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Определяет уникальное имя элемента

Аргументы

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

Аргументы

Любое положительное целое число.

Значение по умолчанию

Зависит от параметра multiple . Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то по умолчанию значение параметра size равно 1.

Пример 5. Высота списка

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


Тег select

Атрибуты

acceskey горячая клавиша (+Alt) для элемента
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает спискок неактивным. Не поддерживается в IE
id уникальный идентификатор
lang определяет используемый язык
multiple флаг. Разрешает одновременный выбор нескольких элементов списка
name уникальное имя списка
onblur потеря фокуса элементом
onchange потеря фокуса элементом при условии, что его содержимое изменилось
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onselect выделение какого-либо текста в текстовом поле
size количество одновременно отображаемых строк
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
title всплывающая подсказка
value значение выбранное пользователем в списке.
Отсутствует в спецификации HTML 4.01!

Пример

Обычный выпадающий список:

Развернутый список с множественным выбором (чтобы выбрать одновременно несколько значений, удерживайте ctrl (или shift) и кликните по нескольким значениям):

Рекомендации по использованию

  • закрывающий тег обязателен ( )
  • должен содержать теги и — элементы списка
  • обязательных атрибутов нет

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

Улучшаем элемент select

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

В данном уроке мы построим скрипт, который будет преобразовывать обычный элемент select в более стильный и функциональный орган управления.

Начнем с разметки HTML. в данном уроке будем использовать разметку HTML5, которая имеет некоторые полезные особенности, такие как атрибуты данных, с помощью которых можно добавлять произвольные данные к разметке на странице.

Атрибуты data используются для объединения информации в элементах option . В них размещается иконка продукта и текстовое описание с форматированием. Оба данных пункта будут выводиться в улучшенной версии элемента select.

Произвольный атрибут data-skip в первом элементе сигнализирует нашему скрипту, что данный пункт не надо включать в генерируемый список. Вы можете просто проверить существование атрибутов data-icon и data-html-text и пропустить элемент, если нужно.

Внизу мы включаем библиотеку jQuery версии 1.4.3 (последней версии на момент написания урока) и наш скрипт script.js, который будет разбираться позже.

jQuery

При обработке события document.ready jQuery проверяет элемент select, и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select:

Строится неупорядоченный список с элементами li, которые представляют каждый пункт option из элемента select. А сам элемент select будет представлен элементом div с классом .selectBox.

Теперь можно взглянуть на код JavaScript.

js/script.js

После загрузки страницы, скрипт сканирует опции элемента select и генерирует разметку, соответствующую атрибутам данных HTML5, которые содержатся в пунктах элемента select. Так как используется jQuery 1.4.3, то доступ к значениям в данных атрибутах возможен с помощью метода jQuery data(). Это действительно полезная опция, которая существенно облегчает доступ к привязанным данным.

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

Теперь наш код на месте и стоит взглянуть на код CSS3.

Мы использовали минимум разметки HTML для вывода элемента выбора и организации выпадающих пунктов. Если ограничивать проект использованием только предшествующих CSS3 технологий, то придется использовать значительно больше элементов div и span.

css/styles.css

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

В настоящий момент множественные фоновые изображения поддерживаются в Firefox, Safari, Chrome и Opera. Для Internet Explorer и старых версий браузеров, определяется обходной вариант, который просто выводит обычный фон. При разборе документа CSS браузер, который не понимает инструкции для множественных фоновых изображений, просто игнорирует их и использует обычный вариант.

Свойство box-sizing, которое используется в классе .dropDown, определяет, как рамочка добавляется к общему размеру элемента. Обычно рамочка увеличивает общую ширину элемента на 2px и рушит все выравнивание. Присвоив свойству box-sizing значение border-box, мы предотвращаем увеличение общей ширины, так как рамочка будет размещаться внутри элемента.

Готово!

Заключение

В данном уроке продемонстрированы некоторые особенности jQuery 1.4.3 и CSS3. Разработанный скрипт сохраняет оригинальный элемент select на странице и изменяет его в соответствии с действиями пользователя. Таким образом, форма содержит правильные значения, которые могут быть корректно обработаны другими частями проекта.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2010/11/better-select-jquery-css3/
Перевел: Сергей Фастунов
Урок создан: 12 Декабря 2010
Просмотров: 94456
Правила перепечатки

5 последних уроков рубрики «Для сайта»

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

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

45+ бесплатных материалов для веб дизайнеров за август 2020

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Стилизация select на CSS

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


HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.

CSS для select

Зададим блоку select позицию relative, делаем мы это для позиционирования кастомной стрелочки, относительно этого блока.

.select <
position: relative;
>

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select <
display: block;
width: 100%; /* от ширины блока div */
padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
background: none; /* убираем фон */
border: 1px solid #ccc; /* рамка */
border-radius: 3px;/* скругление полей формы */
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем дефолнтные стрелочки */
font-family: inherit;/* наследует от родителя */
font-size: 1rem;
color: #444;
>

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after <
content: «»;
display: block;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #000 transparent transparent transparent;
pointer-events: none;
position: absolute;
top: 50%;
right: 1rem;
z-index: 1;
margin-top: -3px;
>

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

Демонстрация примера

Стилизация select option

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

Заключение

Однако лучшим решением на 2020 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    вместо .. .top: 50%; margin-top: -3px; .. лучше .. top: calc(50% — 3px); ..

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Стиль для select CSS

    С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

    Нет ничего лучше, чем увидеть как выглядит список своими глазами:

    Смотреть примерСкачать

    Вот как выглядит этот Select оформленный на CSS:

    Похожие статьи на эту тему:

    А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

    1 шаг. Подключаем необходимые файлы

    Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами :

    2 шаг. HTML структура элемента Select

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

    3 шаг. Добавляем стили для Select CSS

    Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

    В демо примере стили расположены в папке css . Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images .

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

    Вам нужно заменить последнее свойство dropdownvisible:

    И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

    В каких браузерах этот Select CSS (выпадающий список) работает нормально?

    • ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
    • ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
    • ✓ Opera 12.14, Opera 12.15, Opera 12.16
    • ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
    • ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
    • ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
    • ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

    Дополнение к уроку — креативный эффект при наведении + ВИДЕО

    В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

    Вывод

    Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

    Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

    Илон Маск рекомендует:  Глава 4 сортировка
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL