カスタムセレクトドロップダウン
カスタムセレクトは、標準の select 要素では難しい見た目やアニメーションを実現するために、独自の要素で作るドロップダウンです。このサンプルはトリガーボタンに aria-haspopup と aria-expanded 、リストに role="listbox" を付けてアクセシビリティに配慮しています。
解説
カスタムセレクトは、標準の select 要素では難しい見た目やアニメーションを実現するために、独自の要素で作るドロップダウンです。このサンプルはトリガーボタンに aria-haspopup と aria-expanded、リストに role="listbox" を付けてアクセシビリティに配慮しています。クリックでリストの is-open をトグルし、矢印アイコンは aria-expanded の値に連動して回転します。項目を選ぶとラベルが選択値に書き換わり、選択中の項目に is-selected が付きます。
使う場面
- ブランドの世界観に合わせた装飾的な選択UI
- アイコンや色見本付きの選択肢を見せたいフォーム
- 標準セレクトの素っ気ない見た目を避けたいデザイン
選択肢は li.csel__opt を増減し、data-val に送信用の値を入れます。枠線やフォーカス色は .csel__trigger の border-color で調整できます。注意点として、自作セレクトは標準要素ほどキーボード操作が完全ではないため、矢印キーでの移動・Enter での確定・Escape での閉じる、外側クリックで閉じる処理を加えると本格的になります。フォーム送信に使う場合は隠し input に値を入れる仕組みが必要です。
よくある質問
標準のselectタグと比べて何が違いますか？
標準のselectはブラウザやOSが見た目を制御するため装飾の自由度が低い反面、キーボード操作や送信処理が完璧です。このカスタム版は見た目を自由に作れますが、キーボード対応や値の送信は自分で実装する必要があります。
選択した値をフォームで送信するにはどうしますか？
選択時にdata-valの値を読み取れるので、非表示のinput要素を用意してそのvalueに代入してください。そのinputをform内に置けば、通常のフォーム送信で選択値を送れます。