The look of radio buttons can be customized using the CSS appearance property. This property allows to suppress the native appearance of an element (which may vary with operating system), so that CSS can be used to restyle it.
input[type="radio"] {
appearance: none;
/* background, border etc to customize */
}
input[type="radio"]:checked {
/* checked state properties */
}
By setting appearance: none, we can remove all browser styling from the radio button. We can then use other CSS properties like background, border etc to create our own custom radio buttons. The :checked CSS selector can be used to style the radio button in a "checked" state.
The best part about this trick is that no changes to HTML markup is required. Just CSS needs to be changed.
Sadly, ::before & ::after pseudo-elements cannot be used on <input>, so these selectors cannot be used to further customize the radio button.
Example
HTML & CSS :
<input type="radio" name="gender" value="M" />Male
<input type="radio" name="gender" value="F" />Female
input[type="radio"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #555555;
border-radius: 50%;
background-clip: content-box;
padding: 3px;
}
input[type="radio"]:checked {
background-color: #555555;
}
Browser Compatibility
appearance: none is supported in all browsers.