去除单选按钮前面的圈圈

最新推荐文章于 2024-02-05 11:20:15 发布

UsbFor

最新推荐文章于 2024-02-05 11:20:15 发布

阅读量3.3k

点赞数 9

分类专栏：前端样式文章标签： css html

本文链接：https://blog.csdn.net/UsbFor/article/details/107350202

版权

前端样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现原理：使用label+input，每一个单选按钮前或后有一个label标签，像以下这样：

<form class="weicot_radio">
    <input type="radio" name="p_1" value="01" id="p_1" ><label for="p_1">选项1</label>
    <input type="radio" name="p_1" value="02" id="p_2" ><label for="p_2">选项2</label>
    <input type="radio" name="p_1" value="a1" id="p_a" ><label for="p_a">选项3</label>
</form>

label的for属性会将焦点移动到被绑定的元素上，也就是说点击一个label相当于点击了其绑定的一个元素。所以只要将单选按钮隐藏：display：none，点击label就相当于点击了单选按钮。然后通过设置点击label的css样式变化。一组前面没有圈圈单选按钮就完成啦（这里我想提醒自己一下：单选按钮是通过name属性实现互斥的，相同的name属性互斥）

下面是css样式的代码：


        .weicot_radio input[type="radio"]{
            display:none;
        }
        .weicot_radio input[type="radio"] + label{
            padding:0.2em 1em;
            border:1px solid #CCCCCC;
          /*  border-radius:0.5em;*/
            color:#999;
        }
        .weicot_radio input[type="radio"]:checked + label {
            padding: 0.2em 1em;
            border: 1px solid #3399CC;
           /* border-radius: 0.5em;*/
            background: #3399CC;
            color: #FFFFFF;}

input[type="radio"] + label：表示连同右相邻的元素一起选择；

input[type="radio"]:checked：表示选中状态的单选按钮；