おしゃれなチェックボックスをCSSで表現しよう

Posted on by つちえ

僕はデザイナーでないので、普段だとデザインに凝ったコーディングを行うことはあまりないのですが、最近アクセシビリティに関して考える機会があったので、何となく既存のチェックボックスをカスタマイズして書いてみました。

HTML

<div>
    <label class="checkbox_wrap">
        <input type="checkbox"style="display: none;">
        <span class="display_content" />
    </label>
</div>

CSS

.checkbox_wrap {
    cursor: pointer;
}

.checkbox_wrap > .display_content {
    border: 1px solid black;
    /** inline-blockにしないと、サイズの指定ができないことに注意 */
    display: inline-block;
    height: 1em;
    width: 1em;
}

.checkbox_wrap > input[type="checkbox"]:checked + .display_content::before {
    content: "✓";
}

難しいことはしていませんが、簡単に実装の説明して今回は終わろうかと思います。

チェックボックスの状態管理

チェックボックスがチェックされたかどうかを表す状態の管理に関してですが、これはinputタグで行っています。

ただ、これだと見た目があまりよろしくないので、その下にあるdisplay_contentクラスが付与されたspanタグで状態を表示させています。

チェックボックスの状態表示

先ほど説明したspanタグに状態を表示させる処理に関してですが、チェックボックスがチェックされた場合だけにマークが表示させるよう疑似クラスを使いCSS定義を行い、なおかつ、その条件下だけ疑似要素（=チェックマーク)を表示させています。

以上。