ラジオボタンの色を変更するには

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と（ちなみにやチェックボックス）スタイルのラジオボタンには2つの方法があります。

• 経由スタイリングラベルの擬似セレクタと隠すラジオボタン

  /* 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のデスクトップでは機能しません（しかしIEのWindows Phoneで動作します）。

  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>