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

最新推荐文章于 2024-08-23 13:30:11 发布

水痕01

最新推荐文章于 2024-08-23 13:30:11 发布

阅读量2.7k

点赞数 1

分类专栏： css css3 html5 文章标签： css

本文链接：https://blog.csdn.net/kuangshp128/article/details/69218269

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

html5

10 篇文章 0 订阅

订阅专栏

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

案例效果如下:

案例效果

代码如下:

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;
}