title: How to design a radio button, which looks the sam in Firefox, Chrome and IE11
body: <p>I want to design a group of Radio buttons which should look the same in Chrome, Firefox and IE 11. My solution looks pretty fine in Firefox. In Chrome there is a blue box round the buttons and in IE 11 it seems, that the color and border is not recognized.
  That is how it should look like.</p>
  
  <p><a href="https://i.stack.imgur.com/ylWvW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ylWvW.png" alt="enter image description here"></a></p>
  
  <p>Taht is how it looks in Chrome</p>
  
  <p><a href="https://i.stack.imgur.com/bkdvg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bkdvg.png" alt="enter image description here"></a></p>
  
  <p>and that is it how it looks like in IE 11</p>
  
  <p><a href="https://i.stack.imgur.com/WGqrb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WGqrb.png" alt="enter image description here"></a></p>
  
  <p>This is my Code, HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.radiobuttons{
      background-color: white;
      font: 16px Arial, sans-serif;
  }
  .radiolabel{
      font: 16px Arial, sans-serif;
      color: #000000;
      opacity: 0.9;
  }
  
  .radiobtn[type="radio"] {
  
      /* remove standard background appearance */
      -webkit-appearance: none;
      -moz-appearance: none;
      /* create custom radiobutton appearance */
      display: inline-block;
      width: 25px;
      height: 25px;
      padding: 4px;
      /* background-color only for content */
      background-clip: content-box;
      border: 2px solid #000000;
      opacity: 0.4;
      border-radius: 50%;
      vertical-align: bottom;
  }
  
  /* appearance for checked radiobutton */
  .radiobtn[type="radio"]:checked {
      background-color: green;
      border: 2px solid green;
      opacity: 1;
  }
  
  .radiogroup {
      vertical-align: middle;
      margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;link rel = "stylesheet" href = "test.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="radiobuttons"&gt;
      &lt;div class="radiogroup"&gt;
          &lt;input class="radiobtn" type="radio" id="mc" name="Zahlmethode" value="Mastercard" &gt;
          &lt;label class="radiolabel" for="mc"&gt; Mastercard&lt;/label&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;div class="radiogroup"&gt;
          &lt;input class="radiobtn" type="radio" id="vi" name="Zahlmethode" value="Visa"&gt;
          &lt;label class="radiolabel" for="vi"&gt; Visa&lt;/label&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;div class="radiogroup"&gt;
          &lt;input class="radiobtn" type="radio" id="ae" name="Zahlmethode" value="AmericanExpress"&gt;
          &lt;label class="radiolabel" for="ae"&gt; American Express&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can achieve to get the same design for all browser?</p>