BEFORE
BROWSER DEFAULT
Classic Select
文字だけで、OSやブラウザの見た目を使います。
CURRENT VALUEReview
HTML FORM UI LAB
Customizable Select
自作せずに、標準のselectをそのままデザインする。
HTML <select>
CSS base-select
ANATOMY
標準機能のまま、見た目を広げる
SELECT RECIPES
構造を切り替えて試す
option > span
選択肢に、情報の階層をつくる
アイコン・主ラベル・補足文・件数を、ひとつのoption内へ配置します。
FEATURE CHECKこのブラウザの対応状況
確認中
対応していない場合も、通常のselectとして選択できます。
HTML
選択中のoptionをselectedcontentへ反映します。
LIVE COMPARISON
同じselect、違う見せ方
AFTER
HTML + CSS
Customizable Select
アイコン・補足文・件数を、同じoption内に表示します。
CURRENT VALUEReview
SELECTED OPTION
選択結果も、普通のフォーム値
見た目を広げても、取得する値は従来のselect.valueです。
valuereview
labelReview
SEMANTICS<select>そのまま
KEYBOARDNATIVE標準操作
FORM VALUESAME従来どおり
FALLBACKCLASSIC非対応環境