CSS checkbox 添加背景图片

使用前清除默认样式

-webkit-appearance: none;
appearance: none;


网页标签使用label:
<label class="mycheckbox"><input type="checkbox" /><b id="checkboxB"></b></label>

 1 .mycheckbox input{ display:none}
 2 
 3 .mycheckbox b{
 4   background:url(../img/img-checbox-white-off.png) no-repeat;
 5   background-size:30rem/$base 30rem/$base;
 6   width: 30rem/$base;
 7   height: 30rem/$base;
 8   float:left;
 9 }
10 .mycheckbox input:checked + b{
11   background:url(../img/img-checkbox-checked-on.png) no-repeat;
12   width: 38rem/$base;
13   height: 34rem/$base;
14   background-size:38rem/$base 34rem/$base;
15 }

 

ps:$base是scss定义变量，可以直接写成38px;

posted on 2016-11-16 14:35  Mc525  阅读(999)  评论(0)    收藏  举报

导航