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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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
CodePudding user response:
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.
CodePudding user response:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>