問い合わせフォームなどに使われるチェックボックスは、普通に表示すると下記のような表示になります。
ブラウザやOSによって、若干表示のされ方は違ってきますが、いずれにしてもチェックボックスが小さくて操作がしづらいですね。
なによりも、無機質な感じがして面白みがないので、ユーザーから入力することを煩わしく感じられてしまう可能性もあります。
CSSを使って、使いやすくて、わかりやすいチェックボックスを作るには
まず、HTMLの部分ですが、ここは普通に作成します。コードは下記のような感じになりますが、項目を<div>で囲っておきます。さらにposition: relativeを設定しておきます。
デフォルトのチェックボックスはopacity: 0;で隠すようにします。
このままでは、チェックボックスが見えない状態なので、::beforeと::afterの擬似要素を使って、チェックボックスの外枠の部分とチェックマークが表示される設定をしていきます。
チェックマークはborderで4pxの四角を作成し、その後、border-leftとborder-topをゼロで非表示にしています。
さらに、幅を狭くすることで、L字のようなマークになります。これを45度傾けると、ちょうどチェックマークのようになります。
CSS全体の記述は以下のようになります。
フォーカス時にボックスの外枠が表示されるようにbox-shadowの設定もしておきます。
完成すると以下のようにチェックボックスが大きく見やすいフォームになります。デモページはこちら
これなら、スマホで操作するのもやりやすいですし、チェックをつけたボックスとつけていないボックスの違いもわかりやすく、ユーザービリティも高まったと言えますね。
ちなみにGoogle ChromeやMicrosoftのEdgeでは、マウスポインタでチェックをつけた時に、上記のようにフォーカス時の外枠が表示されますが、その他のブラウザだと表示されません。（キーボード操作なら表示される）
スマホの場合も同様にフォーカス時の外枠は表示されません。
