CSS を使用してチェックボックスのスタイルを設定する

このチュートリアルでは、CSS でチェックボックスのスタイルを設定する方法を紹介します。

CSS を使用してチェックボックスのスタイルを設定する

チェックボックスは、ユーザーからの入力を取得するために使用される HTML 要素であり、ほとんどすべての Web サイトで使用されます。ブラウザが提供するデフォルトのチェックボックスは他のすべてのサイトで同じように見えるので、スタイルを設定してみませんか？ :before、:after、:hover、:checked などの疑似要素を使用してスタイルを設定するのは少し複雑ですが、CSS を使用してチェックボックスのスタイルを設定することは可能です。

チェックボックスにスタイルを適用するために、HTML と CSS のみを使用し、追加のライブラリは使用しません。この方法は、最新のブラウザでうまく機能します。チェックボックスのスタイル設定に関しては、多くのアプローチがあります。これらの単純な原則に従って、目標を達成することができます。デフォルトのチェックボックスコントロールを非表示にすることができます。これはブラウザーによってスタイル設定され、CSS を使用して意味のある方法でオーバーライドすることはできません。コントロールを非表示にしても、チェック状態を検出して切り替える必要があります。新しい要素をスタイル設定することで、チェックボックスのチェックされた状態を反映できます。

上記の原則は、さまざまな方法を使用して適用でき、単一の正しいアプローチまたは間違ったアプローチはありません。このチュートリアルでは、最初にチェックボックスを div 要素でラップします。これは、チェックボックスコントロールが非表示になっている場合でも、div 内の任意の場所をクリックすることでチェック状態を切り替えることができることを意味します。次に、チェックボックスを非表示にして、チェックボックスの後に新しい要素を追加し、それに応じてスタイルを設定できます。:checked の状態に応じて選択およびスタイル設定するには、チェックボックスの後に要素を表示する必要があります。CSS の疑似クラスは、特定の状態を要素に定義する特定の要素のスタイルを設定するために使用されます。ここでは、いくつかの疑似要素を使用しています。:before セレクターは、選択した各要素のコンテンツの前に何かを挿入します。:checked セレクターは、チェックされたすべての <input> 要素に一致します。

HTML では、チェックボックスは <label> タグ内にあります。<span> 要素の主な機能は、後で CSS からチェックボックスを参照することです。

CSS では、display プロパティは要素の表示動作（レンダリングボックスのタイプ）を指定します。この場合、none に設定されています。これにより、<label> タグ内の <input> 要素、つまりデフォルトのチェックボックスが完全に削除されます。height、width、および border プロパティを使用して、カスタムチェックボックスを生成しました。CSS の height プロパティと width プロパティは、要素の高さと幅を設定します。border CSS プロパティを使用すると、要素の境界線のスタイル、幅、色を指定できます。display プロパティは、表示動作を指定します。インライン値は、要素をインラインとして表示します。position プロパティは、新しいチェックボックスを設定するために要素に使用される配置のタイプを指定します。

:before 疑似要素は、<span> 要素の前にコンテンツを挿入するために使用されます。:checked セレクターはすべてのチェック済み要素に一致します。つまり、チェックボックスをオンにすると、:before セレクターを使用しているため、要素 <span> の前に新しいコンテンツが挿入されます。これらは、Unicode アイコンの挿入を可能にする content プロパティをサポートします。CSS プロパティ content:'\2714'の値は、チェックマークアイコンを表します。

サンプルコード：

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}