<select> の見栄えや機能をカスタマイズする技術です。
<select>～</select> の間には <option>, <optgroup>, 加えて <hr> を記述できていましたが、加えて <div>, <span>, <img>, <svg> の記述が可能となりました。
<select multiple> や <select size=> にはまだ対応していません。
下記の要素、値、疑似要素が追加されました。
<selectedcontent> : セレクトボックスに表示されるコンテンツ
appearance: base-select : ベーススタイルを指定
select::picker(select) : ポップアップする選択肢リスト
option:checked : 選択された選択肢
select::picker-icon : セレクトボックス右側のピッカーアイコン(▼)
option::checkmark : 選択された選択肢左側のチェックマーク(✔)
select要素、およびその選択肢である ::picker(select) 疑似要素の appearance プロパティに base-select を指定することで、セレクト部品の外観をOS依存のネイティブスタイルではなく、OSに依存しないCSS標準のベーススタイルにすることができます。
.base-select, .base-select::picker(select) {
appearance: base-select;
}
<select> <option>ネイティブスタイルな選択肢#1</option> <option>ネイティブスタイルな選択肢#2</option> <option>ネイティブスタイルな選択肢#3</option> </select> <select class="base-select"> <option>ベーススタイルな選択肢#1</option> <option>ベーススタイルな選択肢#2</option> <option>ベーススタイルな選択肢#3</option> </select>
選択肢に画像を表示することができます。
.my-image-option {
option {
margin: 4px 0;
img {
width: 32px;
border: 1px solid #ccc;
}
}
}
<select class="base-select my-image-option"> <option><img src="../free/flag-japan.svg" alt=""> 日本</option> <option><img src="../free/flag-usa.svg" alt=""> 米国</option> <option><img src="../free/flag-germany.svg" alt=""> ドイツ</option> </select>
<button> と <selectedcontent> を記述すると選択されたコンテンツをカスタマイズすることができます。
.my-selected-content {
selectedcontent {
font-weight: bold;
}
}
<select class="base-select my-selected-content">
<button>
選択：<selectedcontent></selectedcontent>
</button>
<option>選択肢#1</option>
<option>選択肢#2</option>
<option>選択肢#3</option>
</select>
:checked で選択された選択肢のスタイルを指定することができます。
.my-checked {
option:checked {
font-weight: bold;
background-color: pink;
color: red;
}
}
<select class="base-select my-checked"> <option>選択肢#1</option> <option>選択肢#2</option> <option>選択肢#3</option> </select>
セレクトボックスの右端に表示されるピッカーアイコン(▼)は ::picker-icon 疑似要素に対して display: none で非表示にしたり、content: で他のコンテンツに置き換えたり、スタイルを指定することができます。
.my-picker-icon {
&::picker-icon {
content: "⇩";
color: red;
}
}
<select class="base-select my-picker-icon"> <option>選択肢#1</option> <option>選択肢#2</option> <option>選択肢#3</option> </select>
選択された選択肢の左に表示されるチェックマーク(✔)は ::checkmark 疑似要素に対して display: none で非表示にしたり、content: で他のコンテンツに置き換えたり、スタイルを指定することができます。
.my-checkmark {
option::checkmark {
/* display: none; */
content: "●";
color: red;
}
}
<select class="base-select my-checkmark"> <option>選択肢#1</option> <option>選択肢#2</option> <option>選択肢#3</option> </select>
選択肢にフレックスボックスを適用することもできます。
.my-flex {
display: flex;
flex-flow: column wrap;
height: 50px;
border: 1px solid #ccc;
}
<select class="base-select">
<div class="my-flex">
<option>選択肢#1</option>
<option>選択肢#2</option>
<option>選択肢#3</option>
<option>選択肢#4</option>
</div>
</select>
選択肢に詳細説明を追加し、選択時に display: none で非表示にすることで、選択肢に詳細説明を追記することができます。未対応ブラウザで表示すると詳細説明も表示されてしまうので注意してください。
.my-description {
width: 10rem;
selectedcontent {
.description {
display: none;
}
}
option {
.option-item {
padding-bottom: 10px;
.title {
font-weight: bold;
}
.description {
font-size: 80%;
color: #666;
}
}
}
}
<select class="base-select my-description">
<button>
<selectedcontent></selectedcontent>
</button>
<option>
<div class="option-item">
<div class="title">選択肢#1</div>
<div class="description">選択肢#1は...</div>
</div>
</option>
<option>
<div class="option-item">
<div class="title">選択肢#2</div>
<div class="description">選択肢#2は...</div>
</div>
</option>
<option>
<div class="option-item">
<div class="title">選択肢#3</div>
<div class="description">選択肢#3は...</div>
</div>
</option>
</select>
セレクトボックスに選択肢を表示する際にトランジションをかけることができます。
.my-transition {
selectedcontent > div {
transition: transform .2s ease;
@starting-style {
transform: translateY(10px);
}
}
}
<select class="base-select my-transition">
<button>
<selectedcontent></selectedcontent>
</button>
<option><div>選択肢#1</div></option>
<option><div>選択肢#2</div></option>
<option><div>選択肢#3</div></option>
</select>