トップページ > WEB制作 > チェックボックスを画像にする

チェックボックスを画像にする-2015年2月24日-

タイトルの通り、チェックボックスを、なんやかやでデザインした画像にしたいと言われ。。スマホサイトで。。

調べるところ、そういった記事はいくらでもあるんですが、ラベルタグがどうとか、既存の複雑なソースに合わないものが多くてですね。。

とある記事で近いのがあったのですが、うまくいかなかったのでそれを改変して無事完了。。

忘備録です。

input[type=\"checkbox\"]{
    -webkit-appearance: none;
    border-radius: 0;
    border:0;
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(../images/check1_off.png);
    background-size: 26px;
	background-size:26px;
}

input[type=\"checkbox\"]:checked:before {
    content: \"\";
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-block;
    width: 26px;
    height: 26px;
}
input[type=\"checkbox\"]:checked {
    background: url(../images/check1_on.png);
    background-size: 26px 26px;
}