title: Change color on radio button (default and checked)
body: <p><strong>I have a question:</strong></p>
  
  <p>I want my radio button at default-mode to have the css: </p>
  
  <pre><code>border-color: #00AD51;
  color: #fff;
  background-color: #00AD51;
  </code></pre>
  
  <p>and when the user selects/clicks on another radio button it changes to this css: </p>
  
  <pre><code>border-color: #00AD51;
  color: #00AD51;
  background-color: #fff;
  </code></pre>
  
  <p>Is this possible? How can I make specific css on default-mode and checked-mode on radio buttons? </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;p&gt;&lt;b&gt;What is your favorite animal?&lt;/b&gt;&lt;/p&gt;&lt;br /&gt;
  
  &lt;div class="Animals"&gt;&lt;div class="input"&gt;
      &lt;input id="dog" type="radio" name="Animal" checked&gt;
          &lt;label for="dog"&gt;&lt;span&gt;Dog&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="Animals"&gt;&lt;div class="input"&gt;
      &lt;input id="cat" type="radio" name="Animal"&gt;
          &lt;label for="cat"&gt;&lt;span&gt;Cat&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="Animals"&gt;&lt;div class="input"&gt;
      &lt;input id="Horse" type="radio" name="Animal"&gt;
          &lt;label for="Horse"&gt;&lt;span&gt;Horse&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="Animals"&gt;&lt;div class="input"&gt;
      &lt;input id="Cow" type="radio" name="Animal"&gt;
          &lt;label for="Cow"&gt;&lt;span&gt;Cow&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Link to codepen: <a href="https://codepen.io/vicm/pen/QBPQWZ" rel="nofollow noreferrer">https://codepen.io/vicm/pen/QBPQWZ</a></p>