CSS：樣式單選按鈕未顯示為選中狀態

Question

我有一些自定義單選按鈕，這些按鈕在單擊時未顯示為選中狀態。 確實會選擇實際的隱藏單選按鈕，但是由於某些原因，當我選擇新按鈕時，樣式顏色將不會出現。 誰能為為什么提供一些見識？

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>

Answer 1

您的input將放置在 label ，因此input:checked + label:before無法使用。 相鄰的兄弟姐妹選擇器（ + ）僅在第一個選擇器之后選擇兄弟姐妹。 因此，將<input>放在<label>之前。

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

Answer 2

您的問題是+運算符對緊接在前一個元素之后的元素起作用。 如果更改<label>和<input>的順序，它將可以正常工作。

這是更新的JSFiddle 。 =）

此外，此頁面還為書簽添加了方便。 了解每個CSS選擇器的用途很重要。 與您正在使用的選擇器類似的是~ ，它將選擇前一個元素之后的任何元素。 例如，如果您將<br>放在<label>和<input> ，它仍然可以工作。

CSS：樣式單選按鈕未顯示為選中狀態

問題描述

2 個解決方案

解決方案1
1 已采納 2014-12-10 21:41:35

解決方案2
1 2014-12-10 21:42:52

CSS：樣式單選按鈕未顯示為選中狀態

問題描述

2 個解決方案

解決方案1 1 已采納 2014-12-10 21:41:35

解決方案2 1 2014-12-10 21:42:52

解決方案1
1 已采納 2014-12-10 21:41:35

解決方案2
1 2014-12-10 21:42:52