html - 设置输入单选按钮的样式

这个问题已经有了答案：
CSS - How to Style a Selected Radio Buttons Label?
5个答案
我已经在这里研究了如何设置输入按钮的样式，我找到了一些很好的答案，但由于某些原因，当选中时，我无法设置按钮内部的样式。看看我的代码也许我做错了什么

.radio input[type='radio'] {
  display: none; /*removes original button*/
 }

.radio label:before { /*styles outer circle*/
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid orange;
    background-color: transparent;
}

.radio label input[type='radio']:checked + label:after { /*styles inside circle*/
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 10px;
    content: " ";
    display: block;
    background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
 </div>

最佳答案

你不能在css中倒退，这就是为什么你的代码不能工作
您需要在span后面的label内添加一个input，并且可以在选中收音机时设置它的样式
请参阅代码段：

.radio input[type='radio'] {
  display: none;
  /*removes original button*/
}

.radio label:before {
  /*styles outer circle*/
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid orange;
  background-color: transparent;
}

.radio label {
  position: relative;
}

.radio label input[type='radio']:checked+span {
  /*styles inside circle*/
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 1px;
  left: 6px;
  display: block;
  background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male<span></span></label>
  <label><input type="radio" name="gender" value="female"> Female<span></span></label>
  <label><input type="radio" name="gender" value="other"> Other<span></span></label>
</div>