Custom Radio Buttons with CSS appearance Property

css
Published on January 17, 2021

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

Choose your gender :
Male
Female

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.

Related Tutorials
How to Create a Checkmark / Tick with CSS
How to Create a Comment Box with a Containing Text Using CSS
Hide Dropdown Arrow for Select Input with CSS appearance
Custom Checkbox with CSS appearance Property
Comments
Loading Comments