Personnaliser les boutons radio avec CSS

juin 30, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Si vous essayez de styliser les boutons radio directement en utilisant les propriétés CSS comme « background » ou « border », cela ne fonctionnera pas, car la plupart des éléments de formulaire sont natifs aux navigateurs et n’acceptent pas tant de styles visuels. Nous devons donc trouver un autre moyen de styliser les boutons radio.

Dans ce tutoriel vous allez découvrir comment personnaliser les boutons radio avec CSS. Il suffit de copier/coller le code HTML/CSS suivant :

Code HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Personnaliser les boutons radio avec CSS</title>
	</head>
	<body>
		<label for="logiciel">
			<input type="radio" name="radiobtn" id="logiciel"> <span>Développement logiciel</span>
		</label>

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

		<label for="mobile">
			<input type="radio" name="radiobtn" id="mobile" checked> <span>Développement mobile</span>
		</label>
	</body>
</html>

Code CSS:

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;
}