Créer des "flat" checkbox

:salut:

Je vous propose aujourd'hui une traduction de l'article anglophone How To Create Flat Checkboxes par Paul Underwood : Créer des "flat" checkbox en CSS3.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

:fleche: Créer des "flat" checkbox en CSS3.

:merci:

Bon petit tuto, par contre j'ai un résultat imparfait sous Chromium 30 Linux pour la checkbox arrondie non-cochée une fois qu'elle a déjà été cochée (ça se sens que je suis pointilleux ? :D). Est-ce juste chez moi ? (je ne peux pas tester avec d'autres OS/navigateurs pour le moment)

EDIT: j'ai essayé d'aller sur l'outil de développement, mais ça m'enlève l'imperfection au redraw de l'élément quand je le sélectionne :(

EDIT2: en fait c'est une erreur de dessin, probablement causée par le navigateur, qui n'arrive pas que sur la non-sélectionnée, mais aussi sur la sélectionnée, en fonction du scroll en cours, juste les bords gauche et droit du cercle blanc qui sautent... peu de chances que ce soit le css donc :)

Bon tuto.

On voit ici très clairement toutes les limites des solutions HTML5/css.

L'HTML ne devrait être utilisé que pour les data et le CSS uniquement pour le rendu. Or ici le HTML contient clairement des objets destinés uniquement à la présentation:

Code:

---

1 2 3 4 5

<div class="flatRoundedCheckbox"> <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" /> <label for="flatOneRoundedCheckbox"></label> <!-- Uniquement pour de la présentation --> <div></div> <!-- Uniquement pour de la présentation !--> </div>

---

Idealement, il faudrait avoir un HTML qui se limite à ceci:

Code:

---

<input type="checkbox" value="1" class="flatRoundedCheckbox" id="flatOneRoundedCheckbox" name="" />

---

Citation:

---

Envoyé par lvr

On voit ici très clairement toutes les limites des solutions HTML5/css.
L'HTML ne devrait être utilisé que pour les data et le CSS uniquement pour le rendu.

---

Et donc, quel rapport entre la séparation data/rendu et la limite des solutions HTML5/CSS?

Citation:

---

ici le HTML contient clairement des objets destinés uniquement à la présentation

---

Oui pour la DIV vide. Non pour le LABEL: c'est juste qu'il n'a pas de contenu et qu'il le devrait.
Souvenons-nous quand même que c'est une démo…

Citation:

---

Envoyé par Muchos

Non pour le LABEL: c'est juste qu'il n'a pas de contenu et qu'il le devrait.

---

Mets-y un petit texte et tu verras bien ce que ça donne :aie:

c'est cool ça marche!:ccool: