使用css美化单选框（radio）和复选框（checkbox）的样式

最新推荐文章于 2024-09-30 16:42:31 发布

qq_24581629

最新推荐文章于 2024-09-30 16:42:31 发布

阅读量4.3k

点赞数

分类专栏： css3 文章标签： css checkbox

本文链接：https://blog.csdn.net/qq_24581629/article/details/78553466

版权

css3 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

//html
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s></s><span>天空</span>
</label>
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s></s><span>大地</span>
</label>

通过以上的HTML，将label与复选框关联起来，这样点击label就相当于点击复选框

//css
//隐藏默认的复选框样式
.checkbox{
  display: none;
}
//自定义未选中的复选框样式
.checkbox[type=checkbox]+s{
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url('http://host/name1.png');
  background-repeat: no-repeat;
}
//自定义选中时的复选框样式
.checkbox[type=checkbox]:checked+s{
  background-image: url('http://host/name2.png');
}