`<option>` Элемент HTML option

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <option> HTML используется для определения элемента внутри <select>, <optgroup> или элемента <datalist>. Таким образом, <option> может представлять пункты меню во всплывающих окнах и других списках элементов в HTML-документе.

Попробуйте

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

disabled: Если задан этот булев атрибут, этот параметр нельзя выбрать. Часто браузеры отображают такой элемент управления серым цветом, и он не получает события взаимодействия, например щелчки мыши или события, связанные с фокусом. Если этот атрибут не задан, элемент всё равно может быть отключён, если один из его предков — отключённый элемент <optgroup>.
label: Этот атрибут задаёт текст метки, указывающий значение параметра. Если атрибут label не задан, его значение берётся из текстового содержимого элемента.
selected: Если этот булев атрибут присутствует, он указывает, что параметр выбран изначально. Если элемент <option> является потомком элемента <select>, у которого не задан атрибут multiple, только один <option> этого элемента <select> может иметь атрибут selected.
value: Содержимое этого атрибута представляет значение, которое будет отправлено вместе с формой, если выбран этот параметр. Если атрибут не указан, значение берётся из текстового содержимого элемента option.

Стилизация с помощью CSS

Возможности стилизации элементов <option> долгое время были крайне ограничены. В статье Настраиваемые элементы select описаны новые функции, позволяющие полностью настраивать их, как и любые другие элементы DOM.

Стилизация option в старых браузерах

В браузерах, не поддерживающих современные функции настройки (или в старых кодовых базах, где их нельзя использовать), возможности стилизации элементов <option> зависят от браузера и операционной системы. В зависимости от операционной системы Firefox и Chromium учитывают font-size родительского элемента <select>. Chromium также может разрешать задавать color, background-color, font-family, font-variant и text-align.

Дополнительные сведения о старых методах стилизации <option> можно найти в нашем руководстве по расширенной стилизации форм.

Примеры

Примеры см. в статье <select>.

Техническая сводка

Категории содержимого	Нет.
Допустимое содержимое	В традиционных элементах `<select>` допускается только текстовое содержимое, возможно, с экранированными символами (например, `é`). В настраиваемых элементах select элементы `<option>` могут содержать произвольное содержимое.
Пропуск тегов	Начальный тег обязателен. Конечный тег можно опустить, если за этим элементом сразу следует другой элемент `<option>` или `<optgroup>` либо если родительский элемент больше не содержит содержимого.
Допустимые родители	Элемент `<select>`, `<optgroup>` или `<datalist>`.
Неявная роль ARIA	`option`
Допустимые роли ARIA	Роль `role` не допускается
Интерфейс DOM	`HTMLOptionElement`

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

Спецификация
HTML> # the-option-element>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`option`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2
`disabled`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2
`label`	1	12	1 ["До версии 77 Firefox не отображал значение атрибута `label` в качестве текста параметра, если содержимое элемента было пустым. См. ошибку 40545.", "Исторически Firefox позволял событиям клавиатуры и мыши всплывать от элемента `<option>` к родительскому элементу `<select>`, хотя такое поведение различается во многих браузерах. Для лучшей совместимости с вебом (и по техническим причинам) эти события не будут всплывать, когда Firefox работает в многопроцессном режиме и элемент `<select>` отображается как раскрывающийся список. Поведение не меняется, если `<select>` отображается встроенным элементом и для него задан атрибут `multiple` либо атрибут `size` имеет значение больше `1`. Вместо отслеживания событий на элементах `<option>` следует отслеживать события change на элементе `<select>`. Подробнее см. ошибку 1090602.", "Когда Mozilla внедрила в Firefox выделенные потоки для содержимого (в рамках проекта Electrolysis, или e10s), поддержку стилизации элементов `<option>` временно удалили. Начиная с Firefox 54 снова можно задавать цвет текста и фона для элементов `<option>` с помощью CSS-свойств `color` и `background-color`. Подробнее см. ошибку 910022. Обратите внимание: в Linux эта возможность по-прежнему отключена из-за недостаточной контрастности (о ходе работы см. ошибку 1338283)."]	15	≤4	18	4 До версии 77 Firefox не отображал значение атрибута `label` в качестве текста параметра, если содержимое элемента было пустым. См. ошибку 40545.	14	≤3.2	1.0	4.4	≤3.2
`selected`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2
`value`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2

См. также

Другие элементы, связанные с формами: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <input>, <output>, <progress> и <meter>.
Настраиваемые элементы select

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option

<option> Элемент HTML option