使用CSS实现自定义input[checkbox]样式
2017-04-05 09:44
671 查看
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CSS3选择器:checked + 毗邻选择器,选中后给伪元素,或者其他元素添加选中样式;
兼容:
:after 兼容IE8+
: checked 兼容IE9+
综上述:自定义样式兼容IE9+
可使用IE8hack的方式,让IE8-使用原来的checkbox样式
代码:
使IE8-能够正常使用原本样式的checkbox方法:
上方代码使用after伪元素覆盖了input,并没有使用css隐藏掉input,为的就是在IE8-的时候能隐藏为元素,使用原来的checkbox,这里就要运用到单独为IE8书写的hack了
如上样式,在IE7和IE8中字体为红色,IE9+和其他常用浏览器则为绿色,这样就能达到在低版本浏览器中使用自带checkbox,高版本浏览器使用自定义样式的checkbox了,还是挺使用的;
如果有更好的实现和兼容方式,请在评论中告知,谢谢了;
一些漂亮的样式可以参考下这个博客
http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml
兼容:
:after 兼容IE8+
: checked 兼容IE9+
综上述:自定义样式兼容IE9+
可使用IE8hack的方式,让IE8-使用原来的checkbox样式
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .label1 { position: relative; } .label1:after { position: absolute; top: 0px; left: -22px; width: 16px; height: 16px; background: #ededed; border: 1px solid #dcdcdc; content: ''; } form input[type='checkbox']:checked + .label1:after { background: red; } </style> </head> <body> <form action=""> <input type="checkbox" name="a" id="a1" onchange="check()"> <label class="label1" for="a1">记住密码</label> </form> </body> </html>
使IE8-能够正常使用原本样式的checkbox方法:
上方代码使用after伪元素覆盖了input,并没有使用css隐藏掉input,为的就是在IE8-的时候能隐藏为元素,使用原来的checkbox,这里就要运用到单独为IE8书写的hack了
.label1 { position: relative; color: red\0; /*IE8+都能使用这条样式,这行需写在IE7hack之上,在win10中测试的时候发现,IE7执行了该行样式,但是数值为空*/ +color: red; /*IE7才能使用这条样式*/ } form:nth-child(1) .label1 { /* IE9+才能使用的样式*/ color: green; } 结构参考上面的代码
如上样式,在IE7和IE8中字体为红色,IE9+和其他常用浏览器则为绿色,这样就能达到在低版本浏览器中使用自带checkbox,高版本浏览器使用自定义样式的checkbox了,还是挺使用的;
如果有更好的实现和兼容方式,请在评论中告知,谢谢了;
一些漂亮的样式可以参考下这个博客
http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml
相关文章推荐
- 使用css打造自定义select(非模拟)实现原理及样式
- css:默认的checkbox、input、radio太丑了?手把手教你改变使用纯css3改写的带动画的默认样式
- CSS使用自定义光标样式的实现_遁地龙卷风
- Css实现checkbox及radio样式自定义
- 如何实现控制input的CSS但不影响CheckBox以及Radio的样式
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
- ZH奶酪:纯CSS自定义Html中Checkbox复选框样式
- Oracle打印中使用自定义css实现文字倒立
- 使用checkbox实现纯CSS下拉框
- 使用jquery+CSS实现控制打印样式
- HTML5[4]:去除不必要的标签,完全使用css实现样式
- 使用CSS自定义按钮样式
- CSS定义Input之Radio和Checkbox的样式
- jQuery实现自定义checkbox和radio样式
- Android 使用CheckBox实现ListView自定义单选
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
- 怎么让input里的text和button使用不同的css样式
- 用css alpha 滤镜 实现input file 样式美化代码
- 控制input的CSS但不影响CheckBox以及Radio的样式
- CSS定义Input之Radio和Checkbox的样式