フォーム入力
セレクト
ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
ネイティブの <select> ではなく button + role="listbox" で組み、選択中は aria-selected とチェックマークで示します。フォーカスはボタンに保ち、矢印キーで active（視覚ハイライト）を移動、Enterで確定・Escで閉じる王道の実装です。
コード（コピーして使えます）
<div class="sd-wrap">
<span class="sd-label" id="sd-label">プラン</span>
<div class="sd-field">
<button
class="sd-button"
id="sd-button"
type="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="sd-label sd-button"
>
<span class="sd-value" id="sd-value">選択してください</span>
<svg class="sd-caret" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="3,5 7,9 11,5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<ul class="sd-list" id="sd-list" role="listbox" aria-labelledby="sd-label" tabindex="-1" hidden>
<li class="sd-option" role="option" data-value="free" aria-selected="false">
<span class="sd-check" aria-hidden="true">✓</span>Free（無料）
</li>
<li class="sd-option" role="option" data-value="pro" aria-selected="false">
<span class="sd-check" aria-hidden="true">✓</span>Pro（月額 980円）
</li>
<li class="sd-option" role="option" data-value="team" aria-selected="false">
<span class="sd-check" aria-hidden="true">✓</span>Team（月額 2,980円）
</li>
<li class="sd-option" role="option" data-value="enterprise" aria-selected="false">
<span class="sd-check" aria-hidden="true">✓</span>Enterprise（要問合せ）
</li>
</ul>
</div>
</div>