有关label标签的学习总结

最新推荐文章于 2022-05-14 18:02:59 发布

Shawn Yu

最新推荐文章于 2022-05-14 18:02:59 发布

阅读量375

点赞数

分类专栏：知识整理记录文章标签：知识点总结

本文链接：https://blog.csdn.net/weixin_44681533/article/details/88983033

版权

知识整理记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天接触了一个更改点击按钮的问题，运用的只是点是 input 属性下的radio单选框，已知此单选框只能改变大小，无法改变样式，那么该怎么做呢？这里就要用到了label标签，之前接触过，但是没觉得有太大的作用，直到这里用到了后才知道其神奇的作用和效果，哈哈，暴露了我的小白属性。代码如下

 <style>
        label{
            display:inline-block;
            width:15px;
            height: 15px;
            background: url(../c2.jpg) no-repeat;
            padding-left:20px;
        }
        input{
            display: none;
        }
        input:checked+label{
            background: url(../c1.jpg) no-repeat;
        }
        .but{
            display: none;
        }

    </style>
</head>
<body>
    <input type="radio" id="aa" name="bb" >
    <label for="aa">是</label>
     
    <input type="radio" name="bb" id="cc">
    <label for="cc">否</label>
    <input class="but" type="radio">
    
</body>
</html>