单选框radio和复选框checkbox的样式更改：利用伪元素

最新推荐文章于 2021-03-22 11:12:12 发布

Seven_5477

最新推荐文章于 2021-03-22 11:12:12 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/m0_37922443/article/details/107229282

版权

css 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

首先要知道的是：单选框radio和复选框checkbox的样式本身是无法更改的，想要自定义样式，必须用到伪元素。

第一步：用span或者i标签来写单选框/复选框。把这个标签放在input的后面，并且用label将两者包裹起来。

	<label class="radio">黑名单模式
       		<input type="radio" name="mode" value="1">
       		<i></i>
	</label>
	<label class="checkbox">
            <input type="checkbox"/>
            <i></i>
            <span>我已同意
                <a href="#">《用户使用协议》</a>和
                <a href="#">《隐私政策》</a>
            </span>
        </label>

用label的原因是：包裹的两个元素会绑在一起，所以点击i元素的内容，也可以选中input框。

第二步：将i标签的样式写成单选框/复选框。

	.radio i{
        width: 12px;
        height: 12px;
        border: 0.5px solid #999;
        cursor: pointer;
        border-radius: 50%;
        display: inline-block;
    }
    .checkbox i{
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 0.5px solid #ccc;
        cursor: pointer;
        border-radius: 50%;
        vertical-align: middle;
    }

第三步：选中效果。利用伪元素来写选中后的样式，并把选中的样式通过定位或margin来和未选中时的样式结合起来。

	.radio input:checked+i{
        border-color: lightblue;
    }
	.radio input:checked+i::after{
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        background: lightblue;
        margin-left: 2.5px;
        margin-top: 2.5px;
        border-radius: 50%;
    }
    .checkbox input:checked+i{
        border-color: lightblue;
    }
    .checkbox input:checked+i::after{
        display: block;
        content: "\2714";
        text-align: center;
        border-radius: 50%;
        background: lightblue;
        color: #fff;
        font-size: 15px;
        padding-right: 3px;
        vertical-align: middle;
    }

第四步：将原来的单选框/复选框隐藏。

	.radio input{
        display: none;
    }
	.checkbox input{
        display: none;
    }

运行结果：
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    input{
        outline: none;
    }
    .choose{
        margin: 20px 50px;
    }
    .choose .radio{
        padding-left: 20px;
    }
    .radio i{
        width: 12px;
        height: 12px;
        border: 0.5px solid #999;
        cursor: pointer;
        border-radius: 50%;
        display: inline-block;
    }
    .radio input{
        display: none;
    }
    .radio input:checked+i{
        border-color: lightblue;
    }
    .radio input:checked+i::after{
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        background: lightblue;
        margin-left: 2.5px;
        margin-top: 2.5px;
        border-radius: 50%;
    }

    .rule {
        margin: 20px 70px;
    }
    .checkbox i{
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 0.5px solid #ccc;
        cursor: pointer;
        border-radius: 50%;
        vertical-align: middle;
    }
    .checkbox input{
        display: none;
    }

    .checkbox input:checked+i{
        border-color: lightblue;
    }
    .checkbox input:checked+i::after{
        display: block;
        content: "\2714";
        text-align: center;
        border-radius: 50%;
        background: lightblue;
        color: #fff;
        font-size: 15px;
        padding-right: 3px;
        vertical-align: middle;
    }


</style>
<body>
    <div class="choose">
        <label class="radio">黑名单模式
            <input type="radio" name="mode" value="1">
            <i></i>
        </label>
        <label class="radio">白名单模式
            <input type="radio" name="mode" value="2">
            <i></i>
        </label>
    </div>
    <div class="rule">
        <label class="checkbox">
            <input type="checkbox"/>
            <i></i>
            <span>我已同意
                <a href="#">《用户使用协议》</a>和
                <a href="#">《隐私政策》</a>
            </span>
        </label>
    </div>
</body>
</html>

Seven_5477

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
单选框radio和复选框checkbox的样式更改：利用伪元素

首先要知道的是：单选框radio和复选框checkbox的样式本身是无法更改的，想要自定义样式，必须用到伪元素。第一步：用span或者i标签来写单选框/复选框。把这个标签放在input的后面，并且用label将两者包裹起来。 <label class="radio">黑名单模式 <input type="radio" name="mode" value="1"> <i></i> </label> <
复制链接

扫一扫