Тег <selectedcontent> (от английского selected content, «выбранное содержимое») показывает в закрытом выпадающем списке копию выбранного варианта вместе с его разметкой: значком, цветом, жирным шрифтом, описанием. Тег парный: закрывающий </selectedcontent> обязателен.
Обычный выпадающий список в закрытом виде показывает только текст выбранного option, а теги внутри варианта отбрасывает. С selectedcontent в кнопке списка выводится то же, что браузер видит в варианте. Тег нужен там, где вариант состоит не только из слов, например тариф с ценой и цветной меткой.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option value="basic">Базовый</option>
<option value="pro" selected>Про</option>
</select>В этой статье
- Тег selectedcontent в HTML: что это и для чего нужен
- Что находится внутри select: button и selectedcontent
- Как включить показ разметки: appearance: base-select
- Стили selectedcontent: как скрыть часть варианта в закрытой кнопке
- Когда копия обновляется: выбор, скрипт и правка текста
- Несколько selectedcontent, multiple и тег вне select
- selectedcontent и отправка формы
- Атрибуты и доступность selectedcontent
- Поддержка браузерами: где тег работает
- Что увидят в браузере без поддержки и на телефоне
Тег selectedcontent в HTML: что это и для чего нужен
Раньше в закрытом выпадающем списке можно было вывести только текст. Теперь внутри select первым прописывается button, а в нём selectedcontent. Браузер сам копирует в этот тег содержимое выбранного option и заменяет копию при каждой смене выбора.
<label for="plan">Тариф</label>
<select id="plan" name="plan">
<button>
<selectedcontent></selectedcontent>
</button>
<option value="basic"><b>Базовый</b> <span class="d">0 руб.</span></option>
<option value="pro" selected><b>Про</b> <span class="d">490 руб. в месяц</span></option>
</select>В данные формы тег ничего не добавляет: уходит value выбранного варианта, как и без него.
Пример: что браузер копирует в selectedcontent
Копия обновляется при каждой смене выбора, в том числе с клавиатуры.
Что находится внутри select: button и selectedcontent
Структура жёсткая: button первым дочерним элементом select, а в кнопке единственный selectedcontent. Варианты и optgroup идут после кнопки, как обычно. Если кнопки нет, браузер создаёт свою и выводит в ней только текст выбранного варианта. Если кнопка есть, а тега в ней нет, показывается то, что написано в самой кнопке.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option value="basic">Базовый</option>
<option value="pro" selected>Про</option>
</select>Кнопка здесь не отправляет форму и не нажимается: это только место для копии. Тег button с обычными свойствами разобран на странице про button.
Пример: пять способов записать select
Для каждой записи под рамкой показан код и результат разбора. Закрытая кнопка рисуется только при первой записи.
Как включить показ разметки: appearance: base-select
Без дополнительного CSS браузер копирует разметку в selectedcontent, но закрытый список по-прежнему рисует простой текст. Чтобы теги стали видны, режим base-select включается и у самого select, и у его списка ::picker(select). Тогда список выводится внутри страницы, а не окном системы, и его вид задаётся CSS.
select,
::picker(select) {
appearance: base-select;
}Чтобы старые браузеры не получили обрезанный вид, правило оборачивают в проверку поддержки.
@supports (appearance: base-select) {
select,
::picker(select) {
appearance: base-select;
}
}Пример: один select в двух режимах
Копия в DOM появляется в обоих режимах, рисует её только base-select.
Стили selectedcontent: как скрыть часть варианта в закрытой кнопке
Копия считается обычным содержимым selectedcontent, поэтому внутри неё работают обычные селекторы. Селектор selectedcontent .d затрагивает только закрытую кнопку, а в открытом списке то же описание остаётся на месте. Стили самого option, например display: flex, в копию не переходят: у selectedcontent своё значение display.
selectedcontent .d {
display: none;
}Пример: описание скрыто только в кнопке
Справа от названия пропадает описание, в открытом списке оно по-прежнему есть.
Когда копия обновляется: выбор, скрипт и правка текста
Браузер копирует вариант в момент выбора. Если выбрать другой вариант, копия заменяется новой, в том числе когда выбор меняет скрипт. Если же изменить текст уже выбранного варианта, копия остаётся прежней, пока выбор не пересчитается. Повторное присваивание значения этот пересчёт запускает.
const select = document.querySelector("select");
select.selectedOptions[0].querySelector("b").textContent = "Про 2";
// копия ещё прежняя
select.value = select.value;
// копия обновиласьПример: правка выбранного варианта и обновление копии
После первой кнопки копия отстаёт. Вторая и третья кнопки её обновляют.
Несколько selectedcontent, multiple и тег вне select
Тег рассчитан на один выпадающий список с одной кнопкой. Если в кнопке два selectedcontent, копию получает только первый. В списке с multiple копия не заполняется. Тег вне select остаётся пустым, а текст, записанный внутри тега вручную, заменяется копией.
<select>
<button>
<selectedcontent></selectedcontent>
<selectedcontent></selectedcontent>
</button>
<option>Базовый</option>
</select>Пример: где копия появляется, а где нет
Пустым остаётся каждый тег, кроме первого в кнопке, а при multiple пуст и первый.
selectedcontent и отправка формы
Копия нужна только для показа. Данные формы формирует сам select: название поля берётся из name, значение из value выбранного варианта. Что нарисовано в кнопке, на отправку не влияет.
<form>
<select name="plan">
<button>
<selectedcontent></selectedcontent>
</button>
<option value="pro" selected>Про 490 руб.</option>
</select>
<button type="submit">Отправить</button>
</form>Пример: что уходит в форме, а что видно в кнопке
Сравните строку с данными и текст копии: в данных только value.
Атрибуты и доступность selectedcontent
Собственных атрибутов у тега нет, действуют только глобальные: class, id, title, style. Другие, например href, проверка HTML отклоняет. Кнопка с копией служит только для открытия списка: ссылки и кнопки внутри копии не получают фокус и не нажимаются, клик по ним открывает список.
<selectedcontent class="current" id="plan-view"></selectedcontent>Поэтому интерактивные элементы в вариантах выбора лучше не размещать: в закрытой кнопке они всё равно не заработают.
Пример: нажатие на ссылку внутри копии
Список открывается, счётчик нажатий на ссылку не растёт.
Поддержка браузерами: где тег работает
Тег входит в стандарт и работает вместе с настраиваемым select. По данным MDN на 11 октября 2026 года, поддержка есть во всех основных браузерах, кроме Firefox. Статус в MDN: ограниченная доступность, то есть для сайтов, которым нужен одинаковый вид везде, тег пока не базовый.
@supports (appearance: base-select) {
select,
::picker(select) {
appearance: base-select;
}
}Пример: таблица поддержки
Версии указаны по данным MDN.
| Браузер | С какой версии | Поддержка |
|---|---|---|
| Chrome | 135 | есть |
| Chrome для Android | 154 | есть |
| Edge | 135 | есть |
| Safari | 27 | есть |
| Safari на iOS | 27 | есть |
| Firefox | - | нет |
Спецификация тега находится в разделе про элемент selectedcontent стандарта WHATWG.
Что увидят в браузере без поддержки и на телефоне
Браузер, который тег не знает, не ломает страницу: структура с кнопкой игнорируется, а вариант выводится обычным текстом без разметки. Выбор и отправка формы работают как всегда. Поддержку можно проверить из скрипта, а в CSS достаточно @supports.
const hasTag = "HTMLSelectedContentElement" in window;
const hasBase = CSS.supports("appearance", "base-select");На телефоне в браузерах с поддержкой список с base-select тоже выводится внутри страницы, касание открывает его как клик.
Пример: проверка поддержки в вашем браузере
Три строки показывают, что есть в браузере, где открыта эта страница.
Частые ошибки с тегом selectedcontent
Почти все ошибки с этим тегом связаны с местом кнопки в select.
| Ошибка | Что получится | Как исправить |
|---|---|---|
<selectedcontent> записан прямо в select, а не в button | Копия в DOM есть, но закрытый список показывает простой текст | Прописать button первым в select и вложить в него тег |
button после вариантов: <option>…</option><button>… | Кнопка не считается кнопкой списка, виден простой текст | Перенести button на первое место внутри select |
Нет правила appearance: base-select у select и ::picker(select) | Копия создана, но теги в закрытой кнопке не видны | Добавить правило, лучше внутри @supports |
Текст выбранного option изменён скриптом после выбора | Копия остаётся прежней | Повторно присвоить select.value = select.value |
Ссылка или кнопка внутри option, например <a href="/doc">Читать</a> | В закрытой кнопке нажатие открывает список, а не переходит по ссылке | Вынести ссылку за пределы select |
Кнопка с selectedcontent в списке с multiple или size больше 1 | Проверка HTML сообщает об ошибке, копия не заполняется | Использовать выпадающий список без multiple |
