今年（2025年）になって select 要素にスタイルを自由に適用できるようになりました。
それを活用して、JavaScript なしで Windows のメニューの様にショートカットキーを表示する実装が出来たので、参考までに実装方法の共有です。
参考：
現時点では対応ブラウザが限られているなど有るので利用にはご注意ください。
参考）CSS property: appearance: base-select | Can I use...
実装サンプル
MDN のコードを流用して以下のように調整してみました。
セレクトボックスをクリック後、対応するキーを押下すると対象を選択できます。
See the Pen Modern Select Element Styling by k-utsumi (@k-utsumi) on CodePen.
MDN に載っている例では、キーを押下しても選択肢を選べませんが、<option> 要素内の先頭にアルファベット文字を入れる事で選べるようになりました。
実装サンプルでは display: flex と order で順序を制御していますが、他にも flex-direction: row-reverse や grid を利用しても制御できるかと思います。
非表示にした要素内のテキストが先頭の場合でも問題なく選択できました。
(e.g. <span style="display:none">text</span>)
また、先頭からアルファベットが続く場合、それらを続けて打つとより細かく選択できるようです。(実装サンプルだと chicken を選びたい場合は ch を打つなど)
細かい挙動について
チェックマークがデフォルトで付くようですが、セレクタ ::checkmark で簡単に調整できます。
選択時は <selectedcontent> に選択した <option> 内の要素が複製されるようです。
先の例をもう少し実用的な感じに調整してみました。
See the Pen Modern Select Element Styling by k-utsumi (@k-utsumi) on CodePen.
/* チェックマークが不要な場合 */
option {
&::checkmark { display: none }
}
/* option 内ではキーを表示、select の選択した状態では非表示にする場合 */
selectedcontent {
.option-key { display: none }
}
スタイルの当て方に問題が有るのか、セレクト要素にフォーカスした状態でもキー操作が効かない時が有るなど、不安定な挙動が少し気になります。
もし不備など有りましたらご指摘くださいませ🤒