CSS チェックボックス生成ツール
サイズ、角丸、枠線、背景、チェック色を設定し、ネイティブ入力パターンをコピーします。
ライブプレビュー
チェックボックスの状態
Tabでフォーカスの輪郭を確認してください。プレビューはネイティブ入力なので、キーボードやラベルのクリックで操作できます。
使い方
使い方
- サイズ、角丸、枠線、背景、チェック色を調整します。
- 選択、未選択、無効、キーボードフォーカスを確認します。
- HTML と CSS をコピーし、入力を説明的なラベルに結び付けます。
実際のチェックボックスを維持
appearance: none は標準の見た目だけを除き、input type=checkbox を残します。キーボード、支援技術、フォーム送信、ネイティブ状態に使えます。display: none、visibility: hidden、クリック可能な div で代用しません。
ラベルとフォーカスも必要
input の id と label の for を対応させ、クリック操作とスクリーンリーダー名を有効にします。:focus-visible を残すか同等の表示を用意してください。無効でも見えますが変更できず、低い不透明度だけを唯一の合図にしないでください。
よくある質問
あわせて知りたいこと
なぜ標準の見た目を隠しますか？
appearance: none は視覚スタイルだけを除き、選択、無効、キーボード、送信動作を持つネイティブ入力を保ちます。
フォーカスリングを消せますか？
別の明確な表示なしに消さないでください。Space で変わるコントロールを示す必要があります。
生成ラベルだけで十分ですか？
必要な関連付けを示します。具体的な説明に置き換え、複数使う場合は id を一意にしてください。