Web : Styliser des inputs checkbox et radio

13-01-2017

Hey à tous !

Premier tuto sur le site, on va donc commencer par quelque chose de simple mais très important à savoir faire : styliser des cases à cocher. Il s’agit d’élément de formulaire HTML qui sont essentiels et pourtant il n’est pas si simple d’en modifier l’apparence.

Voilà, voilà. J’espère que ça va servir à certain d’entre vous et surtout, les commentaires sont ouverts alors n’hésitez pas à me demander si vous avez des questions précises.

++

Styliser des inputs checkbox

Etape 1 : Le html

La première étape consiste à créer le HTML. Le principe est simple : on crée le couple label + input, on cache l'input et on donne au label l'aspect souhaité de la checkbox.

<form>
	<input type="checkbox" id="checkbox1" name="checkbox1">
	<label for="checkbox1"></label>
</form>  

Etape 2 : Le css

La deuxième étape, c'est mettre le CSS qui va bien mais la-dessus, vous êtes complètement libres.

	input[type="checkbox"]#checkbox1{
		position: absolute;
		left: -10000px;
	}

	input[type="checkbox"]#checkbox1 + label{
		content: "";
		display: block;
		width: 16px;
		height: 16px;
		border: 2px solid #494949;
		border-radius: 2px;
		position: relative;
		overflow: hidden;
		transition: all 0.5s;
	}

	input[type="checkbox"]#checkbox1 + label:before{
		content: "";
	    display: block;
	    width: 28px;
	    height: 3px;
	    background: #1c96c4;
	    position: absolute;
	    top: 6px;
	    left: -30px;
	    transform: rotate(45deg);
	    transition: all 0.5s;
	}

	input[type="checkbox"]#checkbox1 + label:after{
		content: "";
	    display: block;
	    width: 28px;
	    height: 3px;
	    background: #1c96c4;
	    position: absolute;
	    top: 6px;
	    right: -30px;
	    transform: rotate(-45deg);
	    transition: all 0.5s;
	}

	input[type="checkbox"]#checkbox1:checked + label:before{
	    transition: all 0.5s;
		left: -6px;
	}

	input[type="checkbox"]#checkbox1:checked + label:after{
	    transition: all 0.5s;
		right: -6px;
	}

	input[type="checkbox"]#checkbox1 + label:hover{
		background: #f0f0f0;
		cursor: pointer;
	} 

Etape 3 : Le résultat

Le résultat est assez cool, mais surtout il ouvre vers toutes les possibilités de personnalisation qui vous passeront par la tête.

2 Commentaires

  1. Pas mal, je ne connaissais pas cette façon d’écrire le css (je suis du genre à user de trop de Class). En tout cas sympa l’utilisation des pseudo éléments ! C’est clair qu’il y a beaucoup de possibilités d’animation.

Et vous, vous en pensez quoi ?

* => obligatoire

** => pas obligatoire mais sympa