title: Bootstrap Paper's material style of radio/checkbox inputs broken in IE/FF
body: <p>According to <a href="https://material.io/guidelines/components/selection-controls.html" rel="nofollow noreferrer"><strong>Google's Material guidelines</strong> for selection controls</a> (checkboxes, radio buttons, switches), these input fields should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/sD3FL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sD3FL.png" alt="Material Selection Inputs"></a></p>
  
  <p>The <a href="https://bootswatch.com/3/paper/#forms" rel="nofollow noreferrer">Bootstrap Paper Theme for v3.x</a> (now called <a href="https://bootswatch.com/materia/#forms" rel="nofollow noreferrer">Materia in v4</a>) is styled to hit this design target</p>
  
  <p>In chrome, inputs are stylized correctly, but all other browsers merely fallback to native input controls, which disrupts the consistency of the design metaphor.</p>
  
  <p>Here's an MCVE in <a href="https://jsfiddle.net/KyleMit/c8tpo5ep/" rel="nofollow noreferrer">jsFiddle</a> / Stack Snippets that will work / fail depending on browser:</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-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/&gt;
  
  
  &lt;div class="checkbox"&gt;
    &lt;label&gt;&lt;input type="checkbox" value="check1"/&gt; Check Opt 1 &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="checkbox"&gt;
    &lt;label&gt;&lt;input type="checkbox" value="check2" checked/&gt; Check Opt 2&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="radio"&gt;
    &lt;label&gt;&lt;input type="radio" value="radio1" name="grp1" /&gt;Radio Opt 1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="radio"&gt;
    &lt;label&gt;&lt;input type="radio" value="radio2" name="grp1" checked/&gt;Radio Opt 2&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here how the previous code fares in each browser:</p>
  
  <p><a href="https://i.stack.imgur.com/oTSXZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oTSXZ.png" alt="Browser Compatability"></a></p>
  
  <p>Is there a possible workaround for this or are we at the mercy of the browser to style inputs how they deem fit?</p>
  
  <p>This question was also asked on the project's issues page in <a href="https://github.com/thomaspark/bootswatch/issues/497" rel="nofollow noreferrer">github issue #497</a>, but closed citing browser incompatibility</p>