CSS：样式单选按钮未显示为选中状态答案

【问题标题】：CSS: Styled radio buttons not showing as selectedCSS：样式单选按钮未显示为选中状态
【发布时间】：2014-12-11 06:05:23
【问题描述】：

我有一些自定义单选按钮在点击时未显示为选中状态。实际隐藏的单选按钮确实被选中，但由于某种原因，当我选择新的单选按钮时，样式颜色不会出现。谁能提供一些关于为什么的见解？

JSFiddle：http://jsfiddle.net/dan5ermou5/f2aktvy4/1/

CSS：

  /*                                         /
 / CSS for A Place to Begin Section of Form /
/                                         */ 

    #apbContainer {  
        position            :relative;
        height              :702px;
        width               :233px;
        top                 :-320px;
        left                :274px;
        }

/* CSS for Text Boxes and Labels */

    label {  
        display             :inline-block;  
        cursor              :pointer;  
        font-family         :sans-serif;
        font-weight         :bold;
        font-size           :10pt;
        margin-bottom       :4px;
        position            :relative;   
        }


/* style radio button label */
    #radioapb label {
        font-family         :sans-serif;
        font-weight         :normal;
        font-style          :italic;
        font-size           :10pt;
        } 

  /*                      /
 / CSS for Radio Buttons /
/                      */

    /* remove old radio buttons */  

    input[type=radio] {
        display:none;
        }   

    .radio label:before {  
        content: "";   
        display: inline-block;
        width: 14px;  
        height: 14px;  
        margin: 2px 0px 0px 0px;  
        position: absolute;  
        left: 115px;   
        bottom: 1px;  
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
        border-radius: 20px;
        } 

     .radio label:before {  
        border-radius   :8px;  
        }

    .radio input[type=radio]:checked + label:before {  
        content     : "\2022";  
        color       : green;  
        font-size   : 14px;  
        text-align  : center;  
        line-height : 22px;
        }

HTML：

<body>
<!-- Client Check-in Form -->
<div id="apbContainer">
<form method="post" action="processcheck-in.php"> 
    <input type="hidden" name="formID" value="check-inform"/>

<!-- A Place to Begin Radio Buttons -->
<div class="radio">
<div id="radioapb">  
        <label for="male">Male</label>  
            <input id="male" type="radio" name="GENDER" value="m"><br></br>
        <label for="female">Female</label>  
            <input id="female" type="radio" name="GENDER" value="f"><br></br>

        <label for="yhomeless">Yes</label>  
            <input id="yhomeless" type="radio" name="HOMELESS" value="y"><br></br>          
        <label for="nhomeless">No</label>  
            <input id="nhomeless" type="radio" name="HOMELESS" value="n"><br></br>

        <label for="yveteran">Yes</label>  
            <input id="yveteran" type="radio" name="VETERAN" value="y"><br></br>          
        <label for="nveteran">No</label>
            <input id="nveteran" type="radio" name="VETERAN" value="n"><br></br>
</div>  
</div>
<input type="submit" name="dailyForm" value="Submit"/>
</form> 
</div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

您的input 放置在您的label 之后，因此input:checked + label:before 将不起作用。相邻兄弟选择器 (+) 仅选择第一个选择器就在之后的兄弟。因此，请将您的 <input>s 放在您的 <label>s 之前。

我更新了你的 jsFiddle：http://jsfiddle.net/f2aktvy4/3/

【讨论】：

太棒了！完美运行:)

【解决方案2】：

您的问题是 + 运算符适用于直接在前一个元素之后的元素。如果您更改<label>s 和<input>s 的顺序，它将正常工作。

这是更新后的JSFiddle。 =)

另外，一个方便的书签是this page。了解每个 CSS 选择器的用途很重要。与您使用的选择器类似的是~，它将选择前一个元素之后的任何元素。例如，如果您的 <br>s 介于 <label> 和 <input> 之间，它仍然可以工作。

【讨论】：

感谢您的链接！非常感谢:)