::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 # 複選標記 |
瀏覽器相容性
載入中…