サイトをデザインしていく上で、ちょっと面白みのあるサイトにしたい、とした時にお問い合わせフォームなどのチェックボックスなども普通のよりかはひと手間加えたデザインにした方が面白みがましますよね(^^)
ひと手間はおろか、ふた手間ぐらい加えちゃうと逆にあざとくなってしまう可能性がありますが、今回はシンプルなデザインを実装したものを紹介したいと思います！

 まず、今回は以下のチェックボックスを見本としてデザインしていきたいと思います。

CSSにて実際にデザインしてみる

 それではまず、デザインしたチェックボックスをお見せしたいとおもます。

今回はチェックボックスをクリックもしくはタッチすると青系のチェックが表示されるように設定してあります。
それではHTMLコードとCSSでそれぞれ解説したいと思います！

HTMLコード

　チェックボックスを表示させるために以下のようにコードを記述します。

<input id="check" type="checkbox"><label for="check">見本のチェックボックス</label>

上でいう
id=”check”
は<label for=”check”>でfor=”check”と適応させているので、この部分は同じ語句にしましょう。
※ここで設定しないとうまくチェックボックスが動かなくなります

CSS

　上のようにコードを記述したら、続いてCSSでチェックボックスのデザインを設定します！

input{
    display:none;
}

label{
    display:inline-block;
    position:relative;
    padding-left:20px;
}

label:before,label:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:15px;
    height:15px;
}

label:before{
    background:#fff;
    border:1px solid #000;
}

input:checked + label:after{
    top:6px;
    height:7px;
    border-left: 3px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

上のようにCSSを設定することで、今回の見本と同じデザインにすることができます。

　まず

input{
    display:none;
}

これで本当のチェックボックスは消します。

　続いて

label{
    display:inline-block;
    position:relative;
    padding-left:20px;
}

これでチェックボックス横に表示される文字の位置を設定します。
padding-left: 20px;
でチェックボックスと文言の間の隙間を決めます。今回はチェックボックスの大きさを15pxとしているため、チェックボックスと文言の間を5px空かせるために20pxとしました。

　続いていよいよチェックボックスとなるもののデザインを決めていきます。

label:before,label:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:15px;
    height:15px;
}

label:before{
    background:#fff;
    border:1px solid #000;
}

1行目～9行目でチェックボックスの大きさを設定しています。今回はwidthを15pxとして設定しています。
11行目～15行目にてチェックボックスのデザインを設定しています。

　そして最後にチェックボックスをクリックした時のレ点のデザインを以下のCSSで設定します。

input:checked + label:after{
    top:6px;
    height:7px;
    border-left: 3px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

この
top:2px;
でレ点の高さを設定しています。値が小さいとレ点は上になり、反対に値が大きいとレ点が下に表示されます。
border-left: 3px solid #ff0000;
border-bottom: 2px solid #ff0000;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
上でレ点の線の色を設定し、その設定したものを回転させてレ点に見させています。

まとめ

　以上がチェックボックスをCSSでデザインする時の手順になります！チェックボックスそのもの…というよりかは、本当のチェックボックスは非表示にして、疑似的に作ったチェックボックスをデザインする…というニュアンスでしょうか。
この方法である程度自分の思い描くチェックボックスのデザインにさせることができるようになると思いますので、是非ともご活用ください！

関連記事