Créer des "flat" checkbox en CSS

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, How To Create Flat Checkboxes.

Le design sur le Web ne cesse d'évoluer avec les nouvelles fonctionnalités CSS ainsi que le développement des nouveaux périphériques : smartphones, tablettes, etc.
Comme pour les vêtements, les voitures ou tout autre produit faisant appel à un designer, l'apparence de vos sites Web suit des effets de mode. La tendance actuelle pousse les designers à utiliser ce que l'on appelle le « flat design ».

Le « flat design » n'a pas de définition à proprement parler. Il s'agit plutôt d'association de termes par rapport à la tendance actuelle. Cette tendance consiste à exclure du design tout ce qui est superflu. Elle se caractérise par des aplats de couleurs relativement sobres où l'organisation de la typographie crée la structure du contenu. Vous l'aurez compris, le « flat design » est un style minimaliste, clair et extrêmement épuré. L'expression « less is more » prend ici tout son sens !

Dans ce tutoriel nous allons créer deux checkbox avec des styles sensiblement proches. La première sera plutôt arrondie alors que la seconde respectera parfaitement le style « flat design ».

Tout d'abord nous allons commencer par le code HTML de la checkbox. Cette dernière sera placée à l'intérieur d'un div avec un label ; nous allons également ajouter une seconde div vide juste après le label. C'est tout ce dont nous avons besoin au niveau HTML, le reste sera fait en CSS.

<section>
    <!-- Rounded Checkbox &#8594;
    <h3>Rounded Checkbox</h3>
    <div class="flatRoundedCheckbox">
       <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
        <label for="flatOneRoundedCheckbox"></label>
        <div></div>
    </div>
</section>

Le moment est venu de créer le style du bouton. Pour cela nous devons tout d'abord créer une zone en forme de pilule dans laquelle nous allons placer notre bouton.
Tout d'abord nous allons créer le style de la div extérieure en lui donnant une hauteur et une largeur et en la positionnant en relative. Nous utilisons le positionnement relatif pour pouvoir placer notre bouton en absolute à l'intérieur.

.flatRoundedCheckbox
{
    width: 120px;
    height: 40px;
    margin: 20px 50px;
    position: relative;
}
.flatRoundedCheckbox div
{
    width: 100%;
    height:100%;
    background: #d3d3d3;
    border-radius: 50px;
    position: relative;
    top:-30px;
}

Le bouton sur lequel l'utilisateur va cliquer sera le label. Ce label sera simplement un cercle ; comme ce bouton se déplacera au clic de l'utilisateur, nous allons devoir utiliser les transitions. Ensuite nous pouvons positionner notre bouton dans la div extérieure où nous voulons grâce au positionnement absolu.

.flatRoundedCheckbox label
{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
 
    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #FFF;
}

Maintenant nous allons utiliser le sélecteur CSS :checked afin d'appliquer des styles une fois que la checkbox sera sélectionnée. Ensuite nous utiliserons le sélecteur d'adjacence ~ pour cibler la div et changer la couleur d'arrière-plan. Dans le même temps, nous souhaitons déplacer le bouton sur la droite de la checkbox, nous utiliserons une fois encore le sélecteur :checked pour changer la position du label.

.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
    background: #4fbe79;
}
 
.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
    left: 85px;
}

Le code HTML pour cette seconde checkbox est exactement le même que celui de la précédente (checkbox arrondie). Le fonctionnement sera également le même, à savoir le déplacement du bouton au clic de l'utilisateur.

<section>
    <!-- Flat Checkbox -->
    <h3>Flat Checkbox</h3>
    <div class="flatCheckbox">
        <input type="checkbox" value="1" id="flatOneCheckbox" name="" />
        <label for="flatOneCheckbox"></label>
        <div></div>
    </div>
</section>

Le premier code CSS à écrire est aussi le même que pour la checkbox précédente. Nous allons fixer une hauteur et une largeur à la div extérieure ainsi qu'une position:relative. Puis nous allons nous occuper de la div intérieure en lui donnant les mêmes dimensions que la div extérieure pour pouvoir appliquer une couleur d'arrière-plan.

.flatCheckbox
{
    width: 120px;
    height: 50px;
    margin: 20px 30px;
    position: relative;
}
.flatCheckbox div
{
    width: 100%;
    height:100%;
    background: #2fca6c;
    position: relative;
    top:-30px;
}

Le label va être utilisé comme un bouton pour la checkbox, nous devons aussi le placer à droite nous allons donc utiliser les transitions.

.flatCheckbox label
{
    display: block;
    width: 40px;
    height: 40px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
 
    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #fffffd;
}

À l'intérieur du bouton il y a trois lignes qui ajoutent de la texture au bouton. Ces lignes sont ajoutées en utilisant la pseudoclasse CSS :before qui vous permet de créer un élément HTML.

.flatCheckbox label:before
{
    color: #ccc;
    content:'|||';
    font-size: 15px;
    letter-spacing: 1px;
    position: absolute;
    left: 7px;
    top:11px;
}

Pour finir, quand la checkbox est sélectionnée, nous changeons la couleur d'arrière-plan et nous déplaçons le bouton sur la droite.

.flatCheckbox input[type=checkbox]:checked ~ div
{
    background: #e9513a;
}
 
.flatCheckbox input[type=checkbox]:checked ~ label {
    left: 75px;
}

Dans cet article nous avons vu comment créer des checkbox respectant le style très à la mode du « flat design ».
N'hésitez pas à expérimenter de vous-même d'autres styles pour vos checkbox !

Vous pouvez consulter la démonstration afin d'avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.