Customize radio buttons using CSS

December 30, 2020 admin

In this tutorial, we are going to see how to customize radio buttons using CSS. If you try to style the radio buttons directly using CSS properties like “background” or “border” it will not work, as most form elements are native to browsers and do not support so many visual styles. So we have to find another way to style the radio buttons.

So how to customize radio buttons with CSS. Just copy/paste the following HTML/CSS code:

[st_adsense]

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Customize radio buttons using CSS</title>
	</head>
	<body>
		<label for="logiciel">
			<input type="radio" name="radiobtn" id="logiciel"> <span>Software development</span>
		</label>

		<label for="web">
			<input type="radio" name="radiobtn" id="web"> <span>Web development</span>
		</label>

		<label for="mobile">
			<input type="radio" name="radiobtn" id="mobile" checked> <span>Mobile development</span>
		</label>
	</body>
</html>

[st_adsense]

CSS Code:

label {
  display: block;
  cursor: pointer;
  line-height: 2;
  font-size: 1em;
}
[type="radio"] {
  clip: rect(0 0 0 0); 
  position: absolute; 
}
[type="radio"] + span {
  display: block;
}
[type="radio"]:checked + span:before {
  box-shadow: 0 0 0 0.2em #000;
  background:  #8EB2FB;
}
[type="radio"] + span:before {
  content: '';
  width: 1em;
  height: 1em;
  border-radius: 1em;
  display: inline-block;
  border: 0.125em solid #fff;
  transition: 0.5s ease all;
  vertical-align: -0.25em;
  box-shadow: 0 0 0 0.15em #000;
  margin-right: 0.75em;
}