title: Change Radio Button Set Styles to Different Colors
body: <p>I have below html for a quiz and it requires that each of the radio option should display different color like red, green, blue when clicked and for default conditions all will be white background and if the click is second time using a true false condition it would become white or unselected.
  I have tried using radio buttons styled as normal buttons. Would it be better to use checkboxes?</p>
  <p>please guide so that I complete it . Would I need to use JS for each set or jquery is easy to use.</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  
  &lt;style&gt;
  body {
      font-family:sans-serif;
  }
  
  #radioset {
      margin:4px;
     
      float:center;
      
    
  }
  
  #radioset label {
      float:left;
      width:170px;
      margin:4px;
      background-color:#EFEFEF;
      border-radius:4px;
      border:1px solid #D0D0D0;
      overflow:auto;
      width:100%
         
  }
  
  #radioset label span {
      text-align:center;
      font-size: 32px;
      padding:13px 0px;
      display:block;
      
  }
  
  #radioset label input {
      position:absolute;
      top:-20px;
      visibility: hidden;
  }
  
  #radioset input:checked + span {
      background-color:red;
      color:#F7F7F7;
  }
  
  .button {
    /*background-color: #4CAF50;  Green */
    border: 2px solid black;
    /*color: white;*/
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5vw;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    width: 100%;
  }
  
  .div1 {
    width: 95vw;
    
    border-radius: 20px;
    background-color: #ddd;
    padding: 10px;
    margin:0 auto;
    overflow:hidden;
  }
  
  
  .card {
    /* Add shadows to create the &quot;card&quot; effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
    transition: 0.3s;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
  }
  
  
  
  input{
  width: 100%;
  height: 50px;
  font-size: 5vw;
  }
  
  
  h1 {
      font-size:6vw;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- QUESTIONS-- --&gt;
  &lt;div class=&quot;div1 card&quot;&gt;
  &lt;h1&gt;Question 1 ?&lt;/h1&gt;
  
  &lt;div id=&quot;radioset&quot;&gt;
  
      &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;toggle&quot;&gt;&lt;span&gt;YES&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;toggle&quot;&gt;&lt;span&gt;NO&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;toggle&quot;&gt;&lt;span&gt;N/A&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;br&gt;
  &lt;div class=&quot;div1 card&quot;&gt;
  &lt;h1&gt;Question 2 ?&lt;/h1&gt;
  
  &lt;div id=&quot;radioset&quot;&gt;
  
      &lt;label &gt;&lt;input type=&quot;radio&quot; name=&quot;toggle2&quot;&gt;&lt;span&gt;YES&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label &gt;&lt;input type=&quot;radio&quot; name=&quot;toggle2&quot;&gt;&lt;span&gt;NO&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;toggle2&quot;&gt;&lt;span&gt;N/A&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;div class=&quot;div1 card&quot;&gt;
  &lt;h1&gt;Question 3 ?&lt;/h1&gt;
  
  &lt;div id=&quot;radioset&quot;&gt;
  
      &lt;label &gt;&lt;input type=&quot;radio&quot; name=&quot;toggle3&quot;&gt;&lt;span&gt;YES&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label &gt;&lt;input type=&quot;radio&quot; name=&quot;toggle3&quot;&gt;&lt;span&gt;NO&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;toggle3&quot;&gt;&lt;span&gt;N/A&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
      
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;p&gt;___________________________________________________________________________________&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/mrgyk3zs/" rel="nofollow noreferrer">https://jsfiddle.net/mrgyk3zs/</a></p>
  <p>Thanks.</p>