背景颜色造型不起作用

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，这样我们就可以尝试一下，然后再给你答案。