Полностью стилизуемый
Марафон новинок продолжается. В Chrome 135 доступен полностью стилизуемый . Последние несколько лет прорабатывались разные варианты как это сделать. После тестовой реализации и обратной связи от разработчиков, финальный вариант был принят и теперь доступен в Chrome. У нас наконец-то появилась возможность стилизовать стандартный !
Стилизация включается специальным значением свойства appearance:
select, select::picker(select) {
appearance: base-select;
}
Установка свойства меняет режим отрисовки. Вместо системного виджета генерируется новый виджет c HTML-разметкой и базовыми стилями в Shadow DOM. Это позволяет стилизовать внутренние части , но убирает некоторые функции:
- выпадающий список опций не сможет заходить за пределы окна браузера;
- на мобильных устройствах не будет открываться системный интерфейс выбора опций;
- ширина не будет соответствовать самой длинной опции.
Вместе с этим меняется режим парсера. До этого в можно было помещать , , а с недавних пор . Все остальные элементы игнорируются. В новом режиме внутрь можно поместить изображения, SVG и дополнительную разметку. В сам можно добавить и новый элемент для отображения выбранной опции.
…
HTML
…
CSS
…
JavaScript
, , и его внутренние элементы можно свободно стилизовать как обычные дочерние элементы. Вместе с ними можно стилизовать внутренние части в Shadow DOM, доступ к которым осуществляется через специальные псевдо-элементы и псевдо-классы:
- select:open — в открытом состоянии;
- select::picker(select) — выпадающий список опций, реализован как Popover с привязкой через Anchor Positioning;
- select::picker-icon — иконка со стрелкой, которая меняется при открытии, в content можно подставить свой символ или изображение;
- option::checkmark — иконка в виде галочки у выбранной опции, в content можно подставить свой символ или изображение;
- option:checked — выбранная опция.
Можно стилизовать , но не его подпись, создаваемую через атрибут label. К счастью, можно вложить с подписью, стилизовать как нужно и привязать к через ARIA. Доступны псевдо-классы :hover, :focus и :focus-visible, поэтому можно изменять внешний вид при наведении и фокусе. Можно применять flexbox и grid для расположения элементов.
Если браузер не поддерживает новые свойства, то будет работать по-старому. Все недопустимые внутри элементы будут игнорироваться и отображаться в виде обычного текста. Также интересно, что можно отключить appearance: base-select по медиа-запросу, чтобы вернуть на мобильных устройствах системный интерфейс выбора опций.
#css
Марафон новинок продолжается. В Chrome 135 доступен полностью стилизуемый . Последние несколько лет прорабатывались разные варианты как это сделать. После тестовой реализации и обратной связи от разработчиков, финальный вариант был принят и теперь доступен в Chrome. У нас наконец-то появилась возможность стилизовать стандартный !
Стилизация включается специальным значением свойства appearance:
select, select::picker(select) {
appearance: base-select;
}
Установка свойства меняет режим отрисовки. Вместо системного виджета генерируется новый виджет c HTML-разметкой и базовыми стилями в Shadow DOM. Это позволяет стилизовать внутренние части , но убирает некоторые функции:
- выпадающий список опций не сможет заходить за пределы окна браузера;
- на мобильных устройствах не будет открываться системный интерфейс выбора опций;
- ширина не будет соответствовать самой длинной опции.
Вместе с этим меняется режим парсера. До этого в можно было помещать , , а с недавних пор . Все остальные элементы игнорируются. В новом режиме внутрь можно поместить изображения, SVG и дополнительную разметку. В сам можно добавить и новый элемент для отображения выбранной опции.
…
HTML
…
CSS
…
JavaScript
, , и его внутренние элементы можно свободно стилизовать как обычные дочерние элементы. Вместе с ними можно стилизовать внутренние части в Shadow DOM, доступ к которым осуществляется через специальные псевдо-элементы и псевдо-классы:
- select:open — в открытом состоянии;
- select::picker(select) — выпадающий список опций, реализован как Popover с привязкой через Anchor Positioning;
- select::picker-icon — иконка со стрелкой, которая меняется при открытии, в content можно подставить свой символ или изображение;
- option::checkmark — иконка в виде галочки у выбранной опции, в content можно подставить свой символ или изображение;
- option:checked — выбранная опция.
Можно стилизовать , но не его подпись, создаваемую через атрибут label. К счастью, можно вложить с подписью, стилизовать как нужно и привязать к через ARIA. Доступны псевдо-классы :hover, :focus и :focus-visible, поэтому можно изменять внешний вид при наведении и фокусе. Можно применять flexbox и grid для расположения элементов.
Если браузер не поддерживает новые свойства, то будет работать по-старому. Все недопустимые внутри элементы будут игнорироваться и отображаться в виде обычного текста. Также интересно, что можно отключить appearance: base-select по медиа-запросу, чтобы вернуть на мобильных устройствах системный интерфейс выбора опций.
#css