css修改单选框与复选框样式

在移动端开发中往往要修改单选框与复选框的样式

案例效果如下:

代码如下:

html代码:
<section class="select-f select-f1">
                <dl>
                    <dt>您要选择装饰家居的原因是？<a href="javascript:void(0);" class="select-f1-allbtn">(全选)a>dt>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="乔迁新居"/> 乔迁新居
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="新人入住"/> 新人入住
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="房子出租"/> 房子出租
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="喜添婴儿"/> 喜添婴儿
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="提升效果"/> 提升效果
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="checkbox" name="select1" value="换种风格"/> 换种风格
                        label>
                    dd>
                    <dd>
                        <label class="show-other">
                            <input type="checkbox" name="select1" value="其它"/> 其它
                        label>
                    dd>
                    <dd class="other-info">
                        <input type="text" name=""/>
                    dd>
                dl>
            section>
            <section class="select-f2 select-f">
                <dl>
                    <dt>是否有完工期限？包括家具送达时间？dt>
                    <dd>
                        <label>
                            <input type="radio" name="data" value="十分紧急"/> 十分紧急
                        label>
                    dd>
                    <dd>
                        <label>
                            <input type="radio" name="data" value="弹性期限"/> 弹性期限
                        label>
                    dd>
                    <dd>
                        <label class="show-other">
                            <input type="radio" name="data" value="其它"/> 其它
                        label>
                    dd>
                    <dd class="other-info">
                        <input type="text" name=""/>
                    dd>
                dl>
            section>

scss代码
input {
    outline: none;
}
.select-f dl dd label input[type="checkbox"], .select-f dl dd label input[type="radio"] {
    width: 0.64rem;
    height: 0.64rem;
    -webkit-appearance: none;
    border: 1px solid #fff;
}
.select-f dl dd label input[type="checkbox"]:checked{
    background: url(./../img/gou_03.png) no-repeat center;
}
.select-f dl dd label input[type="radio"]:checked{
    background: url(./../img/yuan.png) no-repeat center;
}