Currently, I am using custom CSS to style radio buttons but I've encountered an issue.
The checked radio circle is displaying at different positions in IE11, FF36, and Chrome. Please refer to the image below for a visual representation:
https://i.sstatic.net/jJiOJ.png
The CSS code I'm using to achieve this effect is as follows:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 23px;
height: 22px;
margin-right: 10px;
position: absolute;
left: 0;
border:1px solid $grey;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
content: "\25CF";
border:1px solid $light-blue;
color: $light-blue;
font-size: 26px;
text-align: center;
line-height: 0rem;
padding-top: 7px;
}
If you have any suggestions on how to ensure consistency across all browsers, please share your ideas. Thank you!