如何更改单选按钮的颜色

Question

是否可以通过CSS更改单选按钮的背景颜色？我在互联网上看过，但只在JS中找到解决方案，但不一定理解它们。我尝试了这个，但是没有用：

input[type="radio"]:checked {
  background-color: red;
}

<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal" checked="checked">
  <label for="soundsignal">Oui</label>
  <input type="radio" name="soundsignal">
  <label for="soundsignal">Non</label>
</div>

Answer 1

有两种仅使用CSS设置单选按钮（和复选框的样式）的方式：

• 通过样式标签的伪选择器和隐藏单选按钮

  /* completely hiding radio button */
  input[type="radio"] {
    display: none;
  }
  
  /* simulate radiobutton appearance using pseudoselector */
  input[type="radio"] + label:before {
    content: "";
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 3px;
    margin-right: 5px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #bbbbbb;
    background-color: #e7e6e7;
    border-radius: 50%;
  }
  
  /* appearance of checked radiobutton */
  input[type="radio"]:checked + label:before {
    background-color: red;
  }
  
  /* resetting default box-sizing */
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  
  /* optional styles for centering radiobuttons */
  .sound-signal label {
    display: inline-flex;
    align-items: center;
  }

  <div class="sound-signal">
    Signal sonore:
    <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
    <label for="soundsignal1">Oui</label>
    <input type="radio" name="soundsignal" id="soundsignal2">
    <label for="soundsignal2">Non</label>
  </div>

• 通过使用CSS隐藏标准外观appearance: none并应用自定义外观。不幸的是，这种方式不适用于桌面版IE（但适用于Windows Phone的IE）。

  input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 3px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #bbbbbb;
    background-color: #e7e6e7;
    border-radius: 50%;
  }
  
  /* appearance for checked radiobutton */
  input[type="radio"]:checked {
    background-color: red;
  }
  
  /* optional styles for centering radiobuttons */
  .sound-signal {
    display: flex;
    align-items: center;
  }

  <div class="sound-signal">
    Signal sonore :
    <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
    <label for="soundsignal1">Oui</label>
    <input type="radio" name="soundsignal" id="soundsignal2">
    <label for="soundsignal2">Non</label>
  </div>