如何更改 FireFox 中单选按钮的样式？

Question

I try to change the radio button, I try the following line. My style apples in All browsers but Firefox . In fact, I don't see the style in Firefox.

 #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; }

 <input id="payment_method_stripe" type="radio" class="input-radio" name="payment_method" value="stripe" checked="checked" data-order_button_text=""> <label for="payment_method_stripe">Credit / Debit Card</label> <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" data-order_button_text="Proceed to PayPal"> <label for="payment_method_paypal">PayPal</label>

JSFiddle link

How to apply this style in firefox ? What is the problem that cause not showing in Firefox ?

I have already tried the following solution:

Styling radio button - not work in IE and Firefox How to change style of radio and checkbox input

Answer 1

I think this code will work for you.

 .checkbox { position: relative; padding-left: 30px; margin-right: 20px; } .checkbox input { width: 0; height: 0; position: absolute; } .checkbox span { width: 20px; height: 20px; border-radius: 3px; position: absolute; left: 0; top: -1px; background-color: #fff; content: ''; display: inline-block; visibility: visible; border: 2px solid #776330; box-sizing: border-box; } .checkbox span::after { position: absolute; content: ''; left: 2px; top: 2px; width: 12px; height: 12px; background-color: #776330; display: none; } .checkbox input:checked ~ span::after { display: block; }

 <label class="checkbox" for="payment_method_stripe"> <input id="payment_method_stripe" type="radio" class="input-radio" name="payment_method" value="stripe" checked="checked" data-order_button_text=""> <span></span> Credit / Debit Card </label> <label class="checkbox" for="payment_method_paypal"> <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" data-order_button_text="Proceed to PayPal"> <span></span> PayPal </label>

Answer 2

I like Sato's answer, but you could also add this to your CSS:

input[type='radio'] {
  -moz-appearance: initial !important;
}

I'd try to avoid using !important in your CSS, it's not a good practice to use. I think if you remove it from your code, you could probably remove it from my snippet.