点击label标签选中radio

最新推荐文章于 2022-01-23 13:53:55 发布

c99441122

最新推荐文章于 2022-01-23 13:53:55 发布

阅读量4.5k

点赞数

分类专栏： CSS 文章标签： label radio 标签

本文链接：https://blog.csdn.net/c99441122/article/details/56677058

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <style>
        input[type=radio]{
            display: none;
        }
        .radio-label:hover{
            background:rgba(106,191,255,0.3);
        }

        input[type=radio]:checked+label{
        background:rgba(106,191,255,0.6);
        }
    </style>
</head>
<body>
    <input type="radio" name="mark" value="option1" id="invest_target_r1">
    <label class="radio-label" for="invest_target_r1"> 保守型 </label>
    <input type="radio" name="mark" value="option2" id="invest_target_r2">
    <label class="radio-label" for="invest_target_r2"> 平衡型 </label>
</body>
</html>