title: How to change the style of radio button in FireFox?
body: <p>I try to change the radio button, I try the following line. My style apples in All browsers but <strong>Firefox</strong>.  In fact, <em>I don't see the style in Firefox.</em></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>#payment_method_paypal[type='radio']::after {
      width: 20px !important;
      height: 20px !important;
      border-radius: 3px;
      top: -6px !important;
      left: -1px !important;
      position: relative;
      background-color: #fff !important;
      content: '';
      display: inline-block;
      visibility: visible;
      border: 2px solid #776330 !important;
  }
  
  #payment_method_paypal[type='radio']:checked::after {
      width: 20px !important;
      height: 20px !important;
      border-radius: 3px;
      top: -6px !important;
      left: -1px !important;
      position: relative;
      background-color: #776330 !important;
      content: '';
      display: inline-block;
      visibility: visible;
      border: 2px solid #776330 !important;
      box-shadow: inset 0 0 0 2px #fff !important;
      margin-left: 6px;
  }
  
  
  #payment_method_stripe[type='radio']::after {
      width: 20px !important;
      height: 20px !important;
      border-radius: 3px;
      top: -6px !important;
      left: -1px !important;
      position: relative;
      background-color: #fff !important;
      content: '';
      display: inline-block;
      visibility: visible;
      border: 2px solid #776330 !important;
  }
  
  #payment_method_stripe[type='radio']:checked::after {
      width: 20px !important;
      height: 20px !important;
      border-radius: 3px;
      top: -6px !important;
      left: -1px !important;
      position: relative;
      background-color: #776330 !important;
      content: '';
      display: inline-block;
      visibility: visible;
      border: 2px solid #776330 !important;
      box-shadow: inset 0 0 0 2px #fff !important;
      margin-left: 6px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="payment_method_stripe" type="radio" class="input-radio" name="payment_method" value="stripe" checked="checked" data-order_button_text=""&gt;
  &lt;label for="payment_method_stripe"&gt;Credit / Debit Card&lt;/label&gt;
  
  &lt;input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" data-order_button_text="Proceed to PayPal"&gt;
  &lt;label for="payment_method_paypal"&gt;PayPal&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/rabiei/9mvzyh4q/6/" rel="nofollow noreferrer">JSFiddle link</a></p>
  <p>How to apply this style in <strong>firefox</strong>?
  What is the problem that cause not showing in <strong>Firefox</strong>?</p>
  <p>I have already tried the following solution:</p>
  <p><a href="https://stackoverflow.com/questions/13613933/styling-radio-button-not-work-in-ie-and-firefox">Styling radio button - not work in IE and Firefox</a>
  <a href="https://stackoverflow.com/questions/25793716/how-to-change-style-of-radio-and-checkbox-input">How to change style of radio and checkbox input</a></p>