Personnaliser les boutons checkbox avec CSS

juin 30, 2019juin 29, 2022 Amine KOUIS Aucun commentaire

Si vous essayez de styliser les boutons checkbox 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 checkbox.

Dans ce tutoriel vous allez découvrir comment personnaliser les boutons checkbox 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 checkbox avec CSS</title>
	</head>
	<body>
		<label>
			<input type="checkbox"><span>Développement logiciel</span>
		</label>
		<label>
			<input type="checkbox"><span>Développement Web</span>
		</label>
		<label>
			<input type="checkbox"><span>Développement mobile</span>
		</label>
	</body>
</html>

Code CSS:

label {
	display: block;
	cursor: pointer;
	line-height: 2;
	font-size: 1em;
}

input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

input[type="checkbox"]+span {
	font: 16pt sans-serif;
	color: #000;
}

input[type="checkbox"]+span:before {
	font: 16pt FontAwesome;
	content: '\00f096';
	display: inline-block;
	width: 16pt;
	padding: 2px 0 0 3px;
	margin-right: 0.5em;
}

input[type="checkbox"]:checked+span:before {
	content: '\00f046';
}

input[type="checkbox"]:focus+span:before {
	outline: 1px dotted #aaa;
}

input[type="checkbox"]:disabled+span {
	color: #999;
}

input[type="checkbox"]:not(:disabled)+span:hover:before {
	text-shadow: 0 1px 2px #77F;
}

Résultat
Développement logiciel Développement Web Développement mobile

Voir aussi comment remplacer le Checkbox par un icone fontawesome

QCMs qui pourraient vous intéresser :

Code HTML:

Code CSS:

Vous pourrez aussi aimer

Comment changer une image au survol avec CSS

Comment désactiver un lien en utilisant uniquement CSS

Comment aligner un bloc DIV horizontalement avec CSS

Laisser un commentaire Annuler la réponse