<selectedcontent> Элемент отображения выбранного пункта HTML

Элемент <selectedcontent> HTML используется внутри элемента <select> для отображения содержимого выбранного в данный момент элемента <option> в его первом дочернем элементе <button>. Это позволяет стилизовать все части элемента <select>, называемого «настраиваемым списком выбора».

Атрибуты

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

Описание

Элемент <selectedcontent> используется как единственный дочерний элемент элемента <button>, который должен быть первым дочерним элементом элемента <select>. Любой элемент <option> — единственный другой допустимый дочерний элемент <select> — должен располагаться после пары из <button> и вложенного <selectedcontent>.

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

Как <selectedcontent> работает «за кулисами»

Элемент <selectedcontent> содержит клон содержимого выбранного в данный момент элемента <option>. Браузер отображает этот клон с помощью cloneNode(). Когда выбранный <option> меняется, например при возникновении события change, содержимое <selectedcontent> заменяется клоном нового выбранного <option>. Важно учитывать такое поведение, особенно при работе с динамическим содержимым.

Неактивность <selectedcontent>

По умолчанию любой <button> внутри элемента <select> является неактивным. Поэтому всё содержимое этой кнопки, включая <selectedcontent>, также неактивно. Это означает, что пользователи не могут взаимодействовать с содержимым внутри <selectedcontent> или переводить на него фокус.

Стилизация содержимого выбранного пункта с помощью CSS

Можно выбрать содержимое текущего выбранного элемента <option> и задать его внешний вид внутри кнопки списка выбора. Стилизация кнопки не влияет на стилизацию скопированного содержимого <option>. Благодаря этому можно настроить отображение выбранного пункта в кнопке независимо от его отображения в раскрывающемся списке.

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

selectedcontent img {
  display: none;
}

Примеры

Полный пример с элементом <selectedcontent> приведён в руководстве «Настраиваемые элементы выбора».

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

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

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

См. также

• Элемент <select>
• Элемент <option>
• Элемент <optgroup>
• Настраиваемые элементы выбора