title: Bootstrap Radio button size on firefox
body: <p>I can't figure out why radio buttons are smaller on firefox vs. other browsers.
  I'm using bootstrap in my project.
  Here's the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-gb"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Example - pure CSS&lt;/title&gt;
      &lt;link rel="stylesheet" href="css2.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="5159" aria-labelledby="5158" checked="false"&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input id="51590" name="5159" onchange="sendInput('5159', this.value)" data-modalfocus="" checked="" value="Yes" type="radio" style="margin-top: 1px;"&gt;
                  Yes
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input id="51591" name="5159" onchange="sendInput('5159', this.value)" data-modalfocus="" value="No" type="radio" style="margin-top: 1px;"&gt;
                  No
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.radio {
    /*margin: 8px 0px 10px 0px; */}
  
  .radio + .radio {
    margin-top: 0px; }
  
  .radio label {
    line-height: 16px;
    min-height: 16px;
    color: #222222;
    font-size: 14px;
    margin-left: 4px; }
  
  .radio input[type='radio'] {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 1px 0px #999999 inset;
    }
    .radio input[type='radio']:hover {
      box-shadow: 0 0 1px 0px #999999 inset; }
    .radio input[type='radio']:before {
      content: '';
      display: block;
      width: 40%;
      height: 40%;
      margin: 30% auto;
      border-radius: 50%; }
    .radio input[type='radio']:checked:before {
      background: #666666; }
    .radio input[type='radio']:focus {
      border: 1px solid #4276f2 !important; }
    .radio input[type='radio']:disabled {
      box-shadow: 0 0 1px 0px #CCCCCC inset;
      background: #CCCCCC;
      color: #999999; }
  </code></pre>
  
  <p>Everything looks fine on Chrome and IE, but Firefox seems to hold the radio buttons sizes limited to 13x13 pixels, no matter how large the width and height in the input is.</p>