背景顏色造型不起作用

Question

input[type="radio"] + label:before { 
    display: inline-block; 
    border: 1px solid #999; 
    border-radius: 15px; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    -webkit-appearance: none; 
} 

input[type="radio"]:checked + label:before { 
    background-color: #00ff00; 
    text-align: center; 
    -webkit-appearance: none; 
} 

當我選擇它時，單選按鈕的背景顏色不會改變。

Answer 1

試試這個：

這裏是我的codepen，在裏面你會發現一個示範。

input[type=radio] { 
    display:none; 
} 
input[type=radio] + label { 
    cursor:pointer; 
} 
input[type=radio] + label:before { 
    display: inline-block; 
    border: 1px solid #999; 
    border-radius: 15px; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    -webkit-appearance: none; 
} 
} 

input[type=radio] + label:before{ 
    border-radius:50%; 
    width:16px; 
} 

input[type=radio]:checked + label:before{ 
    background-color: #00ff00; 
} 

下一次創建codepen所以我們可以試驗一下，然後給出答案。