フォーム作成で若干苦労したのでメモ。
- 疑似要素を使用してスタイル当て
- タブキーで選択可能
- スペースキーで選択可能
なチェックボックス＆ラジオボタン。
ポイントとしては
- inputは
opacity:0;にする(display: none;とかだとタブキー選択できない) - inputを
display: block;にする(デフォルトはinlineなんだけど、それだと3pxくらいinputが幅を取ってしまってデザインがずれてしまう)
あたり。
サンプル
See the Pen Styled Checkbox & Radiobutton Sample by urchin2x (@Torixai) on CodePen.