编写点击能变色的单选框

最新推荐文章于 2022-07-21 17:55:47 发布

༺๑༒๑༻

最新推荐文章于 2022-07-21 17:55:47 发布

阅读量228

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44371671/article/details/107214286

版权

创建一个盒子,并创建两个label，在label里面创建radio


<div class="box">
        <label>请选择性别</label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </div>

编写radio的样式


<style>
		/*单选框居中*/
        * {
            text-align: center;
        }
        
        /*设置单选框宽高、设置成行盒、边框、将边框变成圆、鼠标放上去变手*/
        .radio-box .radio {
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 1px solid aqua;
            border-radius: 50px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <label>请选择性别</label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </div>
</body>

设置点击变色样式


<style>
        /*单选框居中*/
        * {
            text-align: center;
        }
        
        /*设置单选框宽高、设置成行盒、边框、将边框变成圆、鼠标放上去变手*/
        .radio-box .radio {
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 1px solid aqua;
            border-radius: 50px;
            cursor: pointer;
        }
        
        /*设置伪元素内容为空、伪元素33设置成块、设置宽高、伪元素背景色、块设置成圆、调边距*/
        .radio-box input:checked+.radio::after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background-color: red;
            border-radius: 50px;
            margin-left: 3px;
            margin-top: 3px;
        }
        
        /*点击radio变色*/
        .radio-box input:checked+.radio {
            border-color: red;
        }
        
        /*设置成空*/
        .radio-box input[type="radio"] {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <label>请选择性别</label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-box">
            <input type="radio" name="sex">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </div>
</body>

效果图203019694.PNG)

在这里插入图片描述

༺๑༒๑༻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写点击能变色的单选框

创建一个盒子,并创建两个label，在label里面创建radio<div class="box"> <label>请选择性别</label> <label class="radio-box"> <input type="radio" name="sex"> <span class="radio"></span> &l
复制链接

扫一扫