チェックボックスに画像を使う

普通のチェックボックスはありきたりすぎるので、

こんな感じのチェックボックスを作ろうと思います。



利点は
・画像が使える
・サイズが自由自在
ということで、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;
}