自定义复选框、单选按钮外观方法。支持IE、Firefox、chrome

最新推荐文章于 2025-07-01 13:25:01 发布

阿生先生

最新推荐文章于 2025-07-01 13:25:01 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： jquery html5 web前端 css3 自定义复选框

本文链接：https://blog.youkuaiyun.com/as1200/article/details/51372026

Web前端专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何自定义复选框和单选按钮的外观，包括支持IE浏览器的方法，通过jQuery插件实现，以及无需支持IE的轻量级CSS3解决方案。文章提供了代码示例和兼容性测试，还分享了一个包含全选功能的jquery.checker.js插件下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图

一、支持IE的方法

由于IE浏览器不支持CSS appearance ，所以为了支持IE只能将实际的input隐藏，使用div来显示外观，然后保证div外观和input的状态保持一致即可。为此我将代码封装成了jquery插件，并为其加入全选按钮的功能，欢迎下载使用，下载链接在本文最后。

实测插件支持chrome 、Firefox和IE7+。由于本人IE浏览器没有IE6模式，所以没有测试IE6，实际IE6应该也能支持。

二、无需支持IE的方法

无需支持IE浏览器的话，方法就轻量多了。使用CSS appearance属性清除input原来的样式，就可以肆意添加你所希望的样式了，然后使用:active来添加input按下时的样式，使用:checked来添加input选中后的样式，代码示例如下：

input[type="checkbox"]{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   display: inline-block;
   vertical-align: middle;
   width: 36px;
   height: 36px;
   border-radius: 18px;
   background-image: url(images/icon-checked.png);
   background-size: 100% auto;
   box-sizing:border-box;
   background-position: 0 0;
   background-color: white;
   border:solid 4px #bbb;
}

/*复选框鼠标按下时增加的样式*/
input[type="checkbox"]:active{
   background-color: rgb(100,100,100);
}

/*复选框选中后增加的样式*/
input[type="checkbox"]:checked{
   background-position: 0 -36px;
   background-color: #e1a656;
   border: 0;
}
/*复选框选中后增加的样式*/
input[type="checkbox"]:checked:active{
   background-color: rgb(100,100,100);
}