Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1054"><legend>ご希望の時間帯</legend><div class="tbx-1054__grid">
<label><input type="radio" name="tbx-1054-time" value="10:00"><span>10:00</span></label>
<label><input type="radio" name="tbx-1054-time" value="11:30"><span>11:30</span></label>
<label><input type="radio" name="tbx-1054-time" value="13:00" disabled><span>13:00<small>満席</small></span></label>
<label><input type="radio" name="tbx-1054-time" value="15:00"><span>15:00</span></label>
<label><input type="radio" name="tbx-1054-time" value="16:30"><span>16:30</span></label>
<label><input type="radio" name="tbx-1054-time" value="18:00"><span>18:00</span></label>
</div><p>※デモ用の空き状況です</p></fieldset>
CSS
.tbx-1054{width:min(280px,100%);border:0;padding:0;margin:0;color:#2a485a;font-family:system-ui}.tbx-1054 legend{font-size:12px;font-weight:750;margin-bottom:12px}.tbx-1054__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tbx-1054 label{position:relative;cursor:pointer}.tbx-1054 input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tbx-1054 label span{min-height:46px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1px;border:1px solid #d4e2e8;background:white;border-radius:7px;font-size:12px;font-weight:700;transition:color .2s,background .2s,transform .2s,border-color .2s}.tbx-1054 small{font-size:8px;font-weight:550}.tbx-1054 label:has(input:not(:disabled)):is(:hover,:focus-within) span{border-color:#38868a;transform:translateY(-2px);background:#e6f5f3}.tbx-1054 input:checked+span{background:#215f69;color:white;border-color:#215f69}.tbx-1054 input:disabled+span{color:#9aa7b4;background:#f0f3f6;text-decoration:line-through;cursor:not-allowed}.tbx-1054 input:focus-visible+span{outline:3px solid #d5a06b;outline-offset:2px}.tbx-1054 p{margin:10px 0 0;color:#8696a3;font-size:9px}
@media(prefers-reduced-motion:reduce){.tbx-1054 label span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Reservation / Form
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。