radio input styling not working for firefox - html

Question

So I've styled my radio input using the css below. However in Firefox, a completely different radio appears and I am unable to style it at all.
It works perfectly in safari and chrome yet I cannot seem to figure out why it isn't working in Firefox.
input[type=checkbox] {
border: 0px;
cursor: pointer;
height: 20px;
margin: 0px 10px 0px 0px;
position: relative;
overflow: hidden;
vertical-align: -5px;
width: 20px;
}
input[type=checkbox]:before {
background-color: transparent;
border: 2px solid #E0E0E0;
content: '';
display: block;
height: 20px;
left: 0px;
opacity: 1;
position: absolute;
transition: opacity .15s linear;
top: 0px;
width: 20px;
}
input[type=checkbox]:after {
border: 2px solid #EC407A;
content: '';
display: block;
height: 23px;
left: -5px;
opacity: 0;
position: absolute;
top: -9px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: opacity .15s linear;
width: 27px;
}
input[type=checkbox]:checked:before {
opacity: 0;
}
input[type=checkbox]:checked:after {
opacity: 1;
}
input[type=checkbox]:focus {
box-shadow: none;
outline: 0px;
}
.radio-wrapper {
position: relative;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
border-radius: 50%;
}
#-webkit-keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
#-moz-keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
.option-input {
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
background: #7CE1C9;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #7CE1C9;
}
.option-input:checked::before {
height: 20px;
width: 20px;
position: relative;
content: '\2716';
display: inline-block;
font-size: 14.66667px;
text-align: center;
line-height: 20px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #7CE1C9;
content: '';
display: block;
position: relative;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
input[type='radio'] + label {
user-select: none;
cursor: pointer;
padding-left: 30px;
}
input[type='radio'] + label:before,
input[type='radio'] + label:after {
background: #fff;
background-clip: padding-box;
border: 2px solid #EC407A;
border-radius: 50%;
bottom: 3px;
content: '';
display: block;
height: 16px;
left: 3px;
margin-top: -8px;
position: absolute;
top: 50%;
transition: all 0.3s ease;
width: 16px;
}
input[type='radio'] + label:after {
background: #7CE1C9;
border: 2px solid #fff;
transform: scale(0);
-wekbit-transform: scale(0);
transition: all 0.3s ease;
}
input[type='radio']:focus + label:before {
box-shadow: 0 0 5px #EC407A;
}
input[type='radio']:checked + label:before {
border-color: #EC407A;
}
input[type='radio']:checked + label:after {
transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
`
<form>
<li class='initialForm'><span class='optionText'>$option1</span><strong><input type='radio' class='option-input radio option1' id='$id' value='1' name='option'></strong>
</li>
<li class='initialForm'><span class='optionText'>$option2</span><strong><input type='radio' class='option-input radio option2' id='$id' value='2' name='option'></strong>
</li>
</form>

Answer 1

You are using -webkit CSS prefixes, which is specifically for Chrome and Safari (or webkit based browsers).
You should ALSO use -moz CSS prefixes, specifically for Firefox. And, of course, if you want to support IE, they may have additionally or different stylings for certain methods.
Specifically for your transform method, in Firefox it is considered experimental, and perhaps -moz-transform is more appropriate.

Answer 2

Source: https://clarknikdelpowell.com/blog/styling-radio-buttons-select-boxes-in-firefox/
Even though it’s a part of Chrome, Safari and Firefox (-webkit-appearance, -moz-appearance), isn’t actually CSS. A lot of people use -webkit-appearance:none to reset the appearance of everything from buttons, inputs, you name it. However, there are a couple of Firefox bugs that make -moz-appearance:none a dangerous proposition.
Since appearance does not work completely on both checkboxes and radio buttons. You can still style radio buttons, you’re just going to have to use a bit of trickery in order to pull it off. Here’s how you’d do it.
Set the radio input to display: none.
Style a span adjacent to the radio button the way you’d like to style the radio button.
Toggle its appearance using the :checked attribute.
For Browser compatibility and further info see source
Toggle its appearance using the :checked attribute.

Answer 3

I found this blog post online and it tackles the problem you are having: https://clarknikdelpowell.com/blog/styling-radio-buttons-select-boxes-in-firefox/
edit:
In general, it's considered bad practice to style radio buttons directly. The reason you are having an issue is because -webkit-appearance, -moz-appearance is not actually CSS. Since you can't style the radio buttons directly, you have to use a bit of a work around.
Set the radio input to display: none.
Style a span adjacent to the radio button the way you’d like to style the radio button.
Toggle its appearance using the :checked attribute.
I sketched up a basic example on jsFiddle using some of the code you specified: https://jsfiddle.net/o3nurghw/2/
HTML:
<form>
<li class='initialForm'>
<span class='optionText'>$option1</span>
<input type='radio' class='option-input radio option1' id='$id' value='1' name='option' />
<span class="overlay"></span> <!-- the adjacent span -->
</li>
<li class='initialForm'>
<span class='optionText'>$option2</span>
<input type='radio' class='option-input radio option2' id='$id' value='2' name='option' />
<span class="overlay"></span> <!-- the adjacent span -->
</li>
</form>
CSS:
.initialForm {
margin-bottom: .5em;
display: block;
cursor: pointer;
font-size: 16px;
line-height: 1em;
}
.overlay {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
border-radius: 50%;
}
.radio {
display: none;
}
.radio:checked + span:before {
width: .75em;
height: .75em;
margin: .125em;
display: block;
content: " ";
background-color: #666;
border-radius: 100%;
}