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

最新推荐文章于 2024-07-11 15:59:35 发布
最新推荐文章于 2024-07-11 15:59:35 发布
阅读量6.8k 收藏 2
点赞数
分类专栏： Web前端 文章标签： jquery html5 web前端 css3 自定义复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/as1200/article/details/51372026
版权
这篇博客介绍了如何自定义复选框和单选按钮的外观，包括支持IE浏览器的方法，通过jQuery插件实现，以及无需支持IE的轻量级CSS3解决方案。文章提供了代码示例和兼容性测试，还分享了一个包含全选功能的jquery.checker.js插件下载链接。
摘要由CSDN通过智能技术生成

先上图


一、支持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[
最低0.47元/天 解锁文章
阿生先生
关注
专栏目录
自定义复选框和单选按钮 icheck.zip
09-17
5. **API 方法**：除了事件外，iCheck 还提供了一些 API 方法，如 `.iCheck('check')`、`.iCheck('uncheck')` 和 `.iCheck('disable')`，可以方便地对复选框或单选按钮进行操作。 6. **兼容性**：iCheck 兼容大部分...
支持ie8单选框与复选框自定义样式制作
06-21
支持ie8单选框与复选框自定义样式
关于IE下复选框的样式问题
a986017181的博客
02-27 578
一、为什么复选框与后面的文字有间距 1.在FF，chrome，Safari等浏览器，是由margin引起的，也就是checkbox有默认margin-right:3px。（FF下复选框默认margin值为3px 3px 3px 4px，chrome与之一致 ）2.IE6-IE8是由本身引起的。 FF的虚框直接依附在复选框本身的边框上，IE6是偌...
AngularJS快速入门
最新发布
LG_971124的博客
07-11 1020
记录angularJS1.0学习笔记
自定义开关型单选按钮
backLight♚
10-16 336
<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>自定义开关型单选按钮</title>         <script src="../js/jquery.js" type=&
升级版--支持ie8单选框与复选框自定义样式制作
08-01
在我的资源http://download.csdn.net/detail/zhu_nana/9555749的基础上做了升级，，，，即为升级版---支持ie8单选框与复选框自定义样式
HTML5自定义网页的checkbox radiobox单选按钮和复选框.rar
07-10
HTML5自定义网页的checkbox radiobox单选按钮和复选框，把单选按钮变成一个点击变色的花朵，把复选框的对勾变成自定义的形状，比默认效果漂亮多了，这里的定义使用了自定义图片。
iCheck_跨浏览器漂亮的自定义复选框和单选按钮插件
02-18
接下来，你需要对需要自定义样式的复选框或单选按钮添加特定的类名，例如`icheck`。这可以通过在HTML标记中直接设置`class`属性实现： ```html ``` 然后，在文档加载完成后，通过调用iCheck的初始化方法来应用...
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
01-30
`隐藏原生的复选框和单选按钮，然后创建自定义的图形元素来代替它们。 ```css input[type="checkbox"], input[type="radio"] { display: none; } ``` 3. **使用兄弟选择器（adjacent sibling selector）**：我们...
jquery iCheck.js实现的自定义复选框checkbox和单选框radio样式插件.zip
11-16
iCheck.js支持响应式设计，适用于各种屏幕尺寸，且兼容各种主流浏览器，包括Chrome、Firefox、Safari、Opera和IE8及以上版本。 二、iCheck.js的安装与引入 要使用iCheck.js，首先需要在HTML文件中引入jQuery库和...
支持ie8单选框与复选框自定义样式
清叶 的专栏
06-21 8192
css 样式 /* wrapper divs 复选框与单选框样式 */ .custom-checkbox,.custom-radio{position:relative;} /* input, label positioning 该样式控制checkbox  */ .custom-checkbox input{position:absolute;left:2px;top:0px;margi
右键加载图片
LJCIke28的博客
10-14 155
【代码】右键加载图片。
原始多选框样式修改（纯css 很简单）
何良语的博客
06-01 5417
input[type=checkbox] { -webkit-appearance: none; //这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持 -moz-appearance: none; width: 11px; border-radius: 2px; height: 11px; ...
html复选框默认样式修改,修改checkbox类型input复选框默认样式
weixin_32287177的博客
06-03 737
我们知道checkbox类型input复选框在每一种浏览器都有默认样式，那么可不可以自定义样式呢？答案是肯定的，至少在Chrome和FireFox等标准浏览器中可以做到，需要注意的，较新版本Chrome浏览器需要使用-webkit-appearance:none;属性先解除默认样式。以下是代码：全选input[type='checkbox']{width:20px;height:20px;ba...
最简单清晰的纯css实现的单选框radio复选框checkbox自定义样式
aaa小二
08-20 8299
先上效果图： demo下载链接： http://download.csdn.net/download/vlilyv/9942113 html框架： 最外层必须有个包裹（我用div）用来设置定位的<fieldset> <legend style="color: red;">自定义单选框radio</legend> <div class="login_agree">
HTML复选框checkbox默认样式修改
热门推荐
薛小强Forever
12-07 3万+
此方法可以将复选框的默认样式替换成任意样式。如图： 未选择：选择时：思路：将复选框隐藏，利用lebal元素的焦点传递特性，用lebal的样式替代复选框。代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>checkbox css change</title> <style type="text/css"> input[t
Appium自动化测试框架详解
Selenium Python API的介绍包括WebDriver和WebElement接口的功能和方法，如何操作表单、文本框、复选框、单选按钮、下拉菜单，以及如何处理警告和弹出框。特别地，讲解了隐式等待和显式等待两种等待机制，这对于处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值