html单选按钮check,CSS模拟radio单选框check复选框html radio点击变颜
表单中的⼀些控件，如radio单选框、checkbox复选框在各个浏览器下表现的很不⼀样，有的实在是丑的没话说，⾮常好的设计往往就败在了这些玩意上。
设计狮看不下去了，在⼀些⾼⼤上的设计稿中，就把⼀些表单元素被设计的很 beautiful，很 biger。等等，设计的⼤哥⼤们，你们考虑过我们这些⼩前端的感受不？
input ⽂本框这些还好，CSS能控制，可是radio、checkbox这些元素我们控制不了啊，⼈家CSS也没提供相应的属性来设置啊，让我们怎么搞吗？
很多时候⽊有办法，我们只能按照设计稿上的设计来，CSS⼜不⽀持，那只能模拟了，然后有了⽤其他标签来模拟这些控件，⽤JS来实现相应的功能。。。
⾔归正传，这⾥介绍⼀种纯CSS模拟单选框和复选框的⽅法，不需要⼀⾏JS。
效果如下：
男
⼥
不男不⼥
HTML代码：
男
⼥
不男不⼥
CSS代码：
label{
display: block;
margin-bottom: 10px;
}
input{
position: absolute; top: -9999px;
}
i{
display: inline-block;
width: 17px; height: 17px;
margin-right: 10px;
background: url(radio.png) no-repeat;
vertical-align: middle;
}
input:checked+i{
background: url(radio_check.png) no-repeat;
}
这种⽅法的原理是通过label标签包裹radio，让label标签⾥⾯的元素具有选中性，在input标签后紧跟⼀个标签i，将radio 通过定位等⽅式在视觉上偏移出去，i设置为未选中的样式，input:checked+i设置选中的样式。
注意：此⽅法不兼容IE6-8，在移动端和不考虑IE的情况下挺合适的。
如果是其他样式，类推即可，做法都是⼀样的。
复选框的模拟和单选框是⼀样的⽅法，这⾥就不演⽰了。
⽂章若需转载，请附上原⽂链接，谢谢配合。^_^

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。