How to change the style of radio button in 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

A pseudo element generated by `::after` is supposed to be pretty much the same, as if it was an actual child element. But - input elements are _empty_ elements, they can not have children. So Firefox is actually behaving rather logically correct here, while the other browsers are not. — CBroe, Nov 10 '21 at 15:48
[Can I use a :before or :after pseudo-element on an input field?](https://stackoverflow.com/q/2587669/1427878) — CBroe, Nov 10 '21 at 15:50

score 2 · Answer 1 · answered Nov 10 '21 at 15:43

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>

score 2 · Accepted Answer · answered Nov 10 '21 at 15:55

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.

score 0 · Answer 3 · answered Oct 17 '22 at 05:28

0

This worked for me,

input[type="checkbox"] {
  accent-color: red;
}

answered Oct 17 '22 at 05:28

Akash Starvin Dsouza

399
3
8

How to change the style of radio button in FireFox?

3 Answers3