チェックボックスのデザインをCSSで変える方法を記述します。チェックボックスのデザインはCSSのプロパティでは変更できないのでチェックが付くボックスの箇所は削除して、変わりに疑似要素を活用してデザインを作成します。
デフォルトのチェックボックスのスタイルを削除
まずはチェックボックスのスタイルを削除します。
input{
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}参考：https://www.nxworld.net/15-useful-css-snippets-in-form-style.html
Nx World様
チェックすると四角が塗りつぶされる
チェックすると四角内が塗りつぶされます。四角自体は疑似要素で作成しています。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check1">
<input type="checkbox" id="check1"><label for="check1">チェックしてね1</label>
</div>CSS
div.check1 label{
position:relative;
padding-left:1.5em;
}
div.check1 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 2px #555;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
}
div.check1 input[type="checkbox"]:checked + label:before{
background:#555;
}チェックするとマークが出る
チェックすると枠内に四角のマークが出ます。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check2">
<input type="checkbox" id="check2"><label for="check2">チェックしてね2</label>
</div>CSS
div.check2 label{
position:relative;
padding-left:1.5em;
}
div.check2 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
}
div.check2 label:after{
content:"";
display:block;
box-sizing:border-box;
height:12px;
width:12px;
position:absolute;
background: #555;
top:50%;
left:4px;
margin-top:-6px;
transition:0.3s;
opacity:0;
}
div.check2 input[type="checkbox"]:checked + label:after{
opacity:1;
}チェックするとマークが出る2
先に紹介したものの丸バージョンです。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check3">
<input type="checkbox" id="check3"><label for="check3">チェックしてね3</label>
</div>CSS
div.check3 label{
position:relative;
padding-left:1.5em;
}
div.check3 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
border-radius:50%;
}
div.check3 label:after{
content:"";
display:block;
box-sizing:border-box;
height:12px;
width:12px;
position:absolute;
background: #555;
top:50%;
left:4px;
margin-top:-6px;
transition:0.3s;
opacity:0;
border-radius:50%;
}
div.check3 input[type="checkbox"]:checked + label:after{
opacity:1;
}チェックするとマークが拡大されながら表示される
先に紹介したマークが出るものに更に拡大されるという動きを加えたものです。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check4">
<input type="checkbox" id="check4"><label for="check4">チェックしてね4</label>
</div>CSS
div.check4 label{
position:relative;
padding-left:1.5em;
}
div.check4 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
}
div.check4 label:after{
content:"";
display:block;
box-sizing:border-box;
height:12px;
width:12px;
position:absolute;
background: #555;
top:50%;
left:4px;
margin-top:-6px;
transition:0.3s;
opacity:0;
transform:scale(0.8);
}
div.check4 input[type="checkbox"]:checked + label:after{
opacity:1;
transform:scale(1);
}チェックするとマークが拡大&回転
先に紹介したものに更に動きを追加し若干回転する様になっています。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check5">
<input type="checkbox" id="check5"><label for="check5">チェックしてね5</label>
</div>CSS
div.check5 label{
position:relative;
padding-left:1.5em;
}
div.check5 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
}
div.check5 label:after{
content:"";
display:block;
box-sizing:border-box;
height:12px;
width:12px;
position:absolute;
background: #555;
top:50%;
left:4px;
margin-top:-6px;
transition:0.3s;
opacity:0;
transform:scale(0.8) rotate(-15deg);
}
div.check5 input[type="checkbox"]:checked + label:after{
opacity:1;
transform:scale(1) rotate(0deg);
}チェックするとマークが拡大（丸バージョン）
チェックするとマークが拡大されるものの丸バージョンです。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check6">
<input type="checkbox" id="check6"><label for="check6">チェックしてね6</label>
</div>CSS
div.check6 label{
position:relative;
padding-left:1.5em;
}
div.check6 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
border-radius:50%;
}
div.check6 label:after{
content:"";
display:block;
box-sizing:border-box;
height:12px;
width:12px;
position:absolute;
background: #555;
top:50%;
left:4px;
margin-top:-6px;
transition:0.3s;
opacity:0;
border-radius:50%;
transform:scale(0.8);
}
div.check6 input[type="checkbox"]:checked + label:after{
opacity:1;
transform:scale(1)
}チェックすると四角がチェックマークに変形するデザイン
チェックすると疑似要素の四角がチェックマークに変形します。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check7">
<input type="checkbox" id="check7"><label for="check7">チェックしてね7</label>
</div>CSS
div.check7 label{
position:relative;
padding-left:1.5em;
}
div.check7 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-10px;
transition:0.3s;
}
div.check7 input[type="checkbox"]:checked + label:before{
transform:rotate(45deg);
border:solid 2px #ddd;
border-top: 0;
border-left:0;
width:13px;
left:4px;
margin-top:-15px;
}チェックすると四角内にチェックマークが出現
チェックすると疑似要素のチェックマークが出現するデザインです。よりチェックボックスらしいデザインで色を変更すれば独自性も演出しやすいです。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check8">
<input type="checkbox" id="check8"><label for="check8">チェックしてね8</label>
</div>CSS
div.check8 label{
position:relative;
padding-left:1.5em;
}
div.check8 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-8px;
transition:0.3s;
}
div.check8 label:after{
content:"";
display:block;
box-sizing:border-box;
position:absolute;
top:50%;
transition:0.3s;
transform:rotate(45deg);
border-bottom:solid 3px #555;
border-right:solid 3px #555;
width:12px;
height:20px;
left:6px;
margin-top:-14px;
opacity:0;
}
div.check8 input[type="checkbox"]:checked + label:after{
opacity:1;
}チェックすると四角内にチェックマークがアニメーションしながら出現
上記で紹介したものに更に動きを加えて、チェックをすると上からフェードインしてくるデザインになっています。
※デフォルトのチェックボックスを削除した上で下記CSSを追加して下さい。
DEMO
HTML
<div class="check9">
<input type="checkbox" id="check9"><label for="check9">チェックしてね9</label>
</div>CSS
div.check9 label{
position:relative;
padding-left:1.5em;
}
div.check9 label:before{
content:"";
display:block;
box-sizing:border-box;
height:20px;
width:20px;
position:absolute;
border:solid 1px #ddd;
top:50%;
bottom:0;
margin-top:-8px;
transition:0.3s;
}
div.check9 label:after{
content:"";
display:block;
box-sizing:border-box;
position:absolute;
top:50%;
transition:0.2s;
transform:rotate(45deg);
border-bottom:solid 3px #555;
border-right:solid 3px #555;
width:12px;
height:20px;
left:6px;
margin-top:-20px;
opacity:0;
}
div.check9 input[type="checkbox"]:checked + label:after{
opacity:1;
margin-top:-16px;
}まとめ
CSSで作るチェックボックスのデザインパターンでした。チェックボックス自体はブラウザごとにデザインが違いますが、この記事の内容を利用してデザインを統一できます。またアイディアが出たら追記していこうと思います。