Home / Blog / effect

CSS模拟radio单选框check复选框

Author: Vic.Wang 2015/07/15 Tags:radiocheckbox单选框复选框css模拟

表单中的一些控件,如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的情况下挺合适的。

如果是其他样式,类推即可,做法都是一样的。

复选框的模拟和单选框是一样的方法,这里就不演示了。