title: Checkbox and Radio button styling not working in Firefox
body: <p>I know this is an old issue and has been answered many times but I can not figure out how to incorporate a fix base off of the other examples. </p>
  
  <p>Ok after styling the checkbox, it looks good in Chrome and Opera (how it is supposed to look), but in Firefox and IE it still looks like the same ugly checkboxes. Is there a easy way to fix this so it looks the same across all browsers? If so could someone with a fresh view of my CSS please help me to fix this. I am using contact form 7 so the HTML is not changeable or I would change the HTML code myself and style according to other tutorials.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Below is for Radio Buttons*/
  .wpcf7-form-control.wpcf7-radio input[type="radio" ] {
      margin: 5px 20px 0px 3px;
      border: 2px solid #35a4d5;
      padding: 10px;
      -webkit-appearance: none;
      border-radius: 50%;
  }
  .wpcf7-list-item.first .wpcf7-list-item-label,.wpcf7-list-item.last .wpcf7-list-item-label {
      font-size: 18px;
      vertical-align: 5px;
  }
  .wpcf7-form-control.wpcf7-radio input[type="radio" ]:checked{
    background:#555;
    box-shadow: inset 0px 0px 0px 3px white;
    -webkit-box-shadow: inset 0px 0px 0px 3px white;
    -moz-box-shadow: inset 0px 0px 0px 3px white;
    -o-box-shadow: inset 0px 0px 0px 3px white;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
  }
  .wpcf7-form-control.wpcf7-radio input:focus{
    outline:none;
  }
  /*END*/
  
  
  
  /*Below is for Check Boxes*/
  .wpcf7-form-control.wpcf7-checkbox input[type="checkbox" ]{
    margin: 5px 4px 0px 3px;
      border: 2px solid #35a4d5;
      padding: 10px;
      -webkit-appearance: none;
  }
  .wpcf7-list-item.first.last .wpcf7-list-item-label{
    font-size: 20px;
    vertical-align: 5px;
  }
  .wpcf7-form-control.wpcf7-checkbox input[type="checkbox" ]:checked{
    background:#555;
    box-shadow: inset 0px 0px 0px 3px white;
    -webkit-box-shadow: inset 0px 0px 0px 3px white;
    -moz-box-shadow: inset 0px 0px 0px 3px white;
    -o-box-shadow: inset 0px 0px 0px 3px white;
  }
  .wpcf7-form-control.wpcf7-checkbox input:focus{
    outline:none;
  }
  /*END*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="wpcf7-form-control-wrap RVCategory"&gt;
       &lt;span class="wpcf7-form-control wpcf7-radio"&gt;
            &lt;span class="wpcf7-list-item first"&gt;
                 &lt;span class="wpcf7-list-item-label" style=""&gt;Motorhome
                 &lt;/span&gt; &amp;nbsp;
  &lt;input type="radio" name="RVCategory" value="Motorhome" checked="checked"&gt;
  &lt;/span&gt;
  &lt;span class="wpcf7-list-item last"&gt;
            &lt;span class="wpcf7-list-item-label"&gt;Trailer
            &lt;/span&gt;&amp;nbsp;
  &lt;input type="radio" name="RVCategory" value="Trailer"&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;span class="myCheckboxes"&gt;
       &lt;span class="wpcf7-form-control-wrap checkbox-112"&gt;
            &lt;span class="wpcf7-form-control wpcf7-checkbox"&gt;
                 &lt;span class="wpcf7-list-item first last"&gt;
                      &lt;input type="checkbox" name="checkbox-112[]" value="Electric Generator"&gt; 
                      &lt;span class="wpcf7-list-item-label"&gt;Electric Generator&lt;/span&gt;
                 &lt;/span&gt;
            &lt;/span&gt;
       &lt;/span&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>