Ça faisait un petit moment que je voulais faire cet article. Grâce au projet Movim j'ai bidouillé pas mal de petits trucs ici et là et je voulais partager certains d'entre eux sur mon blog.

Pour ce premier tutoriel (je ne sais pas si il en aura d'autres) je vais donc vous expliquer comment faire un petit "switch" (comme sur Android ou iOS) en utilisant uniquement CSS3.

Avant d'attaquer le code voici un petit aperçu du résultat, vous pouvez bien sur retrouver cet élément sur Movim (page Profile de préférence).

Switch

Le XHTML

Le code XHTML n'est pas très compliqué, il va tout de même falloir ajouter un label a coté de l'élément checkbox. J'ai également préféré entourer ces deux éléments par une div globale afin de contenir tout comportement particulier.

<div class="checkbox">
    <input type="checkbox" id="checkbox"/>
    <label for="checkbox"></label>
</div>

Le CSS

Coté CSS ça se corse un peu plus, nous allons tout d'abord créer la "boite" en nous aidant de la div contenant nos éléments. Ici je souhaite avoir une largeur de 6em (je travaille quasi tout le temps en em), nous cachons tout ce qui dépasse afin d'éviter les artefacts causés par certains navigateurs, une petite hauteur de 2em et on arrondis le tout légèrement.

.checkbox {
    width: 6em;
    overflow: hidden;
    position: relative;
    height: 2em;
    border-radius: 0.1em;
    background-color: white;
}

Ensuite, nous allons créer le "fond" de la boite où seront affichés le "Yes" et le "No" et qui seront affichés/cachés au changement d'état. Pour ce faire, nous allons utiliser les pseudo-éléments CSS :after et :before.

Nous allons donc créer deux petites div contenant le texte "Yes" et "No". Puis nous allons la placer en haut à gauche et en haut à droite de notre contenant en leurs donnant la même hauteur que leurs parent (ici 2em) et 3em en largeur. Une couleur de fond différente pour chacune, on applique un peu de CSS sur la police et voilà notre boite prête à accueillir le "switch".

.checkbox:after {
    content: 'NO';
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 2em;
    height: 2em;
    width: 3em;
    text-align: center;
    color: white;
    background-color: #D92727;
    font-weight: bold;
}
.checkbox:before {
    content: 'YES';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    line-height: 2em;
    height: 2em;
    width: 3em;
    background-color: #333;
    text-align: center;
    color: white;
    font-weight: bold;
}

Nous allons maintenant utiliser notre élément "label" pour le transformer en interrupteur. Nous le déclarons donc en block, appliquons une largeur un peu plus grande pour éviter, encore une fois, certains comportements bizarres. La hauteur elle ne change pas, je fixe la position de l'élément en haut à gauche par défaut et je lui applique un fond blanc.

Vous avez également remarqué que j'ai rajouté une déclaration de transition CSS, ce qui va me permettre d'animer cet élément au changement d'état.

.checkbox labelfor=checkbox {
   display: block;
   width: 3.3em;
   height: 2em;
   transition: left 0.5s ease;
   cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
   background-color: white;
}

Et finalement

.checkbox inputtype=checkbox:checked + label {
    left: 2.8em;
}

Ici, nous utilisons le sélecteur css :checked ainsi que + pour appliquer un style à l'élément label quand notre checkbox se retrouve dans l'état cochée.

Si l'élément est coché nous allons simplement déplacer l'élément label sur la droite pour cacher l'autre partie du fond de notre "boite".

Et voilà :)