做项目的时候我们常常需要使用单选按钮input[type=radio]和多选框input[type=checkbox],但是默认的样式肯定与UI设计不一致,而且不够美观,这个时候就需要修改默认的样式,方法其实有蛮多,最?#35748;?#21040;的是?#35745;?#20294;是有些时候,?#35745;?#20316;为背景?#35745;?#20351;用,在手机端适配效果不太理想,所以利用css3的重新实现了一遍,注意,因为使用到伪类属性,故在ie8下无效。

原理

利用label标签与对应的input关联,设置label标签的样式,同时input设置透明度为0或者隐藏,使用position(定位)让用户看到的label标签的样式,点击label时会选择到对应的input,使用input的:checked伪类选择器来改变选中label的样式。
另外,这里小萌介绍两种方法,一种是使用纯CSS美化按钮,另外一种是使用iconfont搭配css美化按钮,dome链接附在文章底部,需要的小伙伴儿可自行下载。

方法一:使用纯css修改单选框radio

<ul class="method-one">
    <li>
        <input type="radio" id="option_yes" name="isaloneshow">
        <label for="option_yes"></label>
        <span>是</span>
    </li>
    <li>
        <input type="radio" id="option_no" name="isaloneshow">
        <label for="option_no"></label>
        <span>否</span>
    </li>
</ul>

方法二:使用iconfont搭配css修改单选框radio

<ul class="method-two">
    <li>
        <input type="radio" id="option_one">
        <label class="iconfont icon-choice" for="option_one">?选项一</label>
    </li>
    <li>
        <input type="radio" id="option_two">
        <label class="iconfont icon-choice" for="option_two">?选项二</label>
    </li>
    <li>
        <input type="radio" id="option_three">
        <label class="iconfont icon-choice" for="option_three">?选项三</label>
    </li>
</ul>

另外,此方法需要搭配js来实现效果,也很简单

$('.method-two label').on('click',function(){
    var radioId = $(this).attr('name');
    $('.method-two label').removeClass('icon-choice icon-selected') && $(this).addClass('icon-selected').parent().siblings().children('label').addClass('icon-choice');
    $('.method-two input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
});

使用纯css修改多选框checkbox

<ul class="method-three">
    <li>
        <input id="class_one" class="blue" type="checkbox">
        <label for="class_one"></label>
        <span>选项一</span>
    </li>
    <li>
        <input id="class_two" class="blue" type="checkbox">
        <label for="class_two"></label>
        <span>选项二</span>
    </li>
    <li>
        <input id="class_three" class="blue" type="checkbox">
        <label for="class_three"></label>
        <span>选项三</span>
    </li>
</ul>

这里主要展示html部分的代码,具体的css样式的代码,需要的同学可点击下方的DEMO链接进行查看。

点击这里查看DEMO