背景颜色造型不起作用

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所以我们可以试验一下，然后给出答案。