こんな感じのチェックボックスを作ろうと思います。
利点は
・画像が使える
・サイズが自由自在
ということで、UIコンセプトに併せて
好きなように使える点です。
image
この2種類を作ります
html(極力cssで制御するのがモットーなので、htmlはシンプルです)
※アメブロ記事上で、formタグ・inputタグが使えないので、スペースが入ってます
< form>
< input type="checkbox" checked>
< input type="checkbox">
< /form>
css
input[type="checkbox"]{
-webkit-appearance: none; //元々のチェックボックスを非表示
position: relative; //checked時画像のためのrelative
display: inline-block;
width: 100px;
height: 100px;
background: url(./img/checkbox.png); //未チェック時の画像
background-size: contain;
}
//チェック時の挙動
input[type="checkbox"]:checked:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
display: inline-block;
width: 100px;
height: 100px;
background: url(./img/checkbox_arrow.png); //チェックした際の画像
background-size: 100px 100px;
}