自定义单选/复选框样式

最新推荐文章于 2024-08-01 21:41:04 发布

灼灼其华_csdn

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量710

点赞数

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/xie123_csdn/article/details/64443911

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现自定义单选/复选框都是将html的input隐藏掉，然后利用label标签和input的绑定关系，对label标签的样式进行设定。一种是用自定义背景图片，另一种是单纯用css和伪类，比较之后觉得用纯css实现更方便些，于是采用了这种方式。
label与input的绑定。当input标签设置了id时，将label标签的for属性设置为与绑定的input一致，这样就可以实现点击该label标签时，选中与之关联的input选框。
html代码如下，举最简单的单选和复选例子。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
    <div>
        <input type="radio" name="sex" value="male" id="male"><label for="male">男</label><br>
        <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
    </div>
    <div>
        <input type="checkbox" name="num" value="a" id="1"><label for="1">A</label><br>
        <input type="checkbox" name="num" value="b" id="2"><label for="2">B</label><br>
        <input type="checkbox" name="num" value="c" id="3"><label for="3">C</label>
    </div>
</body>
</html>

css代码如下，主要是隐去自有的input，设置label的伪类样式。

input[type=radio], input[type=checkbox]{
    display: none;
}
label:before{
    content:'';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #f5f5f5;
    border:1px solid #999;
    margin-right: 3px;
    margin-bottom: -2px;
}
input[type=radio]+label:before{
    border-radius: 50%;
}
input[type=checkbox]+label:before{
    border-radius: 3px;
}
input[type=radio]:checked+label:before{
    content: '\2022';
    color: #f5f5f5;
    font-size: 20px;
    text-align: center;
    line-height: 15px;
    background-color: #67a4ee;
    border-color: #67a4ee;
}
input[type=checkbox]:checked+label:before{
    content:'\2713';
    font-size: 15px;
    color: #f5f5f5;
    background-color: #67a4ee;
    text-align: center;
    line-height: 15px;
    border-color: #67a4ee;
}