CSS技巧：隐藏单选按钮-优快云博客

本文介绍了一种使用CSS和HTML实现隐藏单选按钮的方法，通过将单选按钮设置为不可见，同时利用label标签使其保持可点击，从而创建一组无外观单选按钮。文章详细解释了如何通过CSS样式改变已选中的label样式。

实现原理：使用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：表示选中状态的单选按钮；