Popularisé par iOS, le checkbox slider est un élément d’interface utilisateur très apprécié (des concepteurs tout au moins). Il existe beaucoup de plugins JavaScript permettant de transformer les habituelles checkboxes en slider mais vous allez voir qu’il est possible d’y parvenir à l’aide de CSS seulement. Tout cet article parlera de checkbox mais vous pouvez (techniquement) l’appliquer à des boutons radio.

Côté HTML

Nous allons devoir ajouter un élément à la suite de notre checkbox et, encapsuler le tout dans un label. Nous lui donnerons deux attributs data qui contiendront des “labels” pour les états checked et unchecked. Nous les afficherons à l’aide des pseudo éléments ::before et ::after. Les attributs data implique l’utilisation d’HTML5.

<label><input type="checkbox" /><span class="checkslide" data-checked="on" data-unchecked="off"></span></label>

Nous aurions pu nous passer de cet élément supplémentaire mais, si webkit permet l’utilisation des pseudo éléments ::before et ::after (constaté sous chrome) il n’en est rien des autres navigateurs et surtout, c’est contraire aux specs.

Côté CSS

Mettre notre .checkslide et l’input dans le label permet de checker et unchecker l’input en cliquant sur .checkslide. Mettre le .checkslide à la suite de l’input va nous permettre d’utiliser la technique dite du “checkbox hack" et styliser notre .checkslide en fonction de l’état checked de l’input :

input:checked ~ .checkslide::after {
    content: attr(data-checked);
}
input:not(:checked) ~ .checkslide::after {
    content: attr(data-unchecked);
}

Ici, notre checkbox sera suivi de on ou off selon qu’elle est checked ou non. Ce qu’il y a de bien avec cette technique c’est que notre checkbox reste une checkbox classique sauf si le navigateur supporte :checked, :not, ::after et ::before. La bonne nouvelle c’est que jusqu’à preuve du contraire, les navigateurs qui supportent :checked supportent également :not, ::after et ::before.

On habille le tout

Maintenant nous allons donner à notre élément l’apparence d’un checkbox slider et il y a plusieurs façons d’y parvenir. Ce qu’il faut retenir c’est que si nous voulons appliquer des styles à .checkslide, il faut utiliser, dans le sélecteur, :checked pour que ceux-ci ne s’appliquent qu’aux navigateurs concernés. Cela va souvent nous obliger à les doubler :

input:checked ~ .checkslide,
input:not(:checked) ~ .checkslide {
    background: #999;
}

Quelques styles plutard nous voilà avec quelques exemples de checkbox sliders compatibles Firefox, Opera, Chrome, Safari et Internet Explorer 9 et +. À voir sur dabblet.

Au passage, dabblet est un excellant outil créé par Lea Verou qui, contrairement à ce qui a pu être dit par erreur n’est pas une activiste des propriétés vendeurs mais bel et bien du web standard comme nous l’aimons ;).

blog comments powered by Disqus