::checkmark
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
::checkmark は CSS の擬似要素で、カスタマイズ可能な select 要素の現在選択されている <option> 要素内に配置されたチェックマークを対象とします。選択されているオプションを視覚的に示すために使用することができます。
試してみましょう
<label for="pet-select">
ペットを選択:
</label>
<br />
<select id="pet-select">
<option value="cat">猫</option>
<option value="dog">犬</option>
<option value="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;
}
構文
::checkmark {
/* ... */
}
解説
::checkmark擬似要素は、カスタマイズ可能な select 要素の現在選択されている <option> 内に配置されたチェックマークを対象とします。
この機能は、親要素にピッカーが設定され、かつ appearance プロパティの base-select 値によって基本外観が設定されている場合にのみ利用可能です。生成されるボックスは、 ::before 擬似要素によって生成されるボックスよりも先に表示されます。アイコンは content プロパティを使用して独自のカスタマイズが可能です。
::checkmark セレクターは、例えばチェックマークを非表示にしたい場合、独自のアイコンを使用したい場合、または <option> 要素内のチェックマークの表示位置を調整する目的で使用する場合に便利です。
メモ:
::checkmark 擬似要素はアクセシビリティツリーに含まれないため、そこに設定された生成された content は支援技術によって読み上げられません。それでも、視覚的に設定する新しいアイコンが意図する目的に沿って意味をなすことを確認する必要があります。
例
チェックマークのカスタマイズ
カスタマイズ可能な選択機能を利用するには、 <select> 要素とそのピッカーの両方に、 appearance の値として base-select を設定する必要があります。
select,
::picker(select) {
appearance: base-select;
}
フレックスボックス が <option> 要素のレイアウトに使用されていると想定します（カスタマイズ可能な選択ボックスの現在の実装では実際に使用されています）。この場合、チェックマークを列の先頭から末尾に移動するには、チェックマークに 0 より大きい order 値を設定し（0 より小さい値を設定している場合は、それを 0 に設定する）、さらに auto を margin-left に設定して、行末に揃えることで実現できます（詳細は alignment および auto のマージンを参照）。
content プロパティの値を別の絵文字に設定することで、表示されるアイコンを変更することもできます。
option::checkmark {
order: 1;
margin-left: auto;
content: "☑️";
}
このコードが使用される完全な例と、ライブサンプルがレンダリングされる例については、現在の選択チェックマークのスタイル設定を参照してください。
仕様書
| Specification |
|---|
| CSS Form Control Styling Level 1 # checkmark |
ブラウザーの互換性
Loading…