input radio和checkbox的样式美化

lynnk

2020-02-15

3530 人已围观

做项目的时候我们常常需要使用单选按钮input[type=radio]和多选框input[type=checkbox]，但是默认的样式肯定与UI设计不一致,而且不够美观，这个时候就需要修改默认的样式，方法其实有蛮多，最先想到的是图片，但是有些时候，图片作为背景图片使用，在手机端适配效果不太理想，所以利用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>

HTML

方法二：使用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

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码