::checkmark
::checkmark CSS 伪元素 目标是放置在当前选定的<option>元素内的复选标记，该元素属于可定制的 select 元素。它可用于提供视觉指示，表明哪个选项被选中。
试一试
<label for="pet-select">
Select pet:
</label>
<br />
<select id="pet-select">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="chicken">
Chicken
</option>
</select>
option::checkmark {
color: orange;
font-size: 1.5rem;
}
select,
::picker(select) {
appearance: base-select;
width: 200px;
}
select {
border: 2px solid #dddddd;
background: #eeeeee;
padding: 10px;
}
::picker(select) {
border: none;
}
option {
border: 2px solid #dddddd;
background: #eeeeee;
padding: 10px;
}
option:first-of-type {
border-radius: 8px 8px 0 0;
}
option:last-of-type {
border-radius: 0 0 8px 8px;
}
option:nth-of-type(odd) {
background: white;
}
option:not(option:last-of-type) {
border-bottom: none;
}
语法
css
::checkmark {
/* ... */
}
描述
::checkmark 伪元素目标是放置在可定制的 select 元素当前选定的<option>内的复选标记。
它只有在源元素具有选择器并通过 appearance 属性的 base-select 值设置了基本外观时才能进行目标定位。它生成的框出现在 ::before 伪元素生成的任何框之前。图标可以使用 content 属性进行自定义。
::checkmark 选择器很有用，例如，如果你想隐藏复选标记，使用自定义图标，或调整复选标记在<option>元素内的渲染位置。
注意：::checkmark 伪元素未包含在辅助功能树中，因此在其上设置的任何生成的 content 将不会被辅助技术宣布。你仍然应该确保你设置的任何新图标在视觉上都符合其预期目的。
示例
自定义复选标记
要选择启用可定制的 select 功能，<select> 元素及其选择器都需要将其 appearance 值设置为 base-select
css
select,
::picker(select) {
appearance: base-select;
}
假设正在使用 flexbox 来布局 <option> 元素（在可定制 select 的当前实现中是这样），那么你可以通过为其设置一个大于 0 的 order 值，并使用 auto margin-left 值将其对齐到行的末尾（参见对齐和自动边距）来将复选标记从行的开头移动到行的末尾。
content 属性的值也可以设置为不同的表情符号来更改显示的图标。
css
option::checkmark {
order: 1;
margin-left: auto;
content: "☑️";
}
有关使用此代码的完整示例以及实时示例渲染，请参见样式化当前选择的复选标记。
规范
| 规范 |
|---|
| CSS 表单控件样式 Level 1 # 复选标记 |
浏览器兼容性
加载中…