Styliser les formulaires HTML en pure CSS3

checkbox

Par défaut, les formulaires ne sont pas très jolis surtout du point de vue des graphistes.
Pourtant, le graphiste ne peut pas faire à sa guise car il y a des limites du point de vue de l’intégration html.

Dès lors, nous front end développeur on a tenté beaucoup d’expérimentation pour égayer tous cela.

La solution JavaScript parait la plus tendance mais avec l’évolution du CSS3, il a pris le relais étant donné qu’il est plus accessible que le JavaScript et vu que on ne peut ignorer l’accessibilité

Styliser le select

Dans cette article, on va étudier comment ajouter une flèche personnalisé sur le select.
Pour cela, il suffit d’utiliser la propriété CSS3 de transformation pour donner une rotation à 90° sur l’élément (la flèche) et après jouer avec les pseudo classes after et before.

Et enfin, un point important ne pas oublier d’utiliser la propriété CSS : pointer-events: none;

Ça vous paraîtra compliquer, mais voyons ensemble le code CSS et html pour mieux comprendre le principe.

Styliser un checkbox ( ou un radio button )

 

Le code Html est assez simple.
Il s suffit de bien faire correspondre l’id de l’input checkbox à l’attribut ‘for‘ du label.

La structure est là mais sans le CSS il y aura pas de changement car tous se joue dans le css

Le code \2714 permet d’afficher le “check”. Le sélecteur adjacent (+) correspond à tout élément Y immédiatement précédé par un élément X. Techniquement le css va cacher les inputs , et va styliser le label avec l’attribut :after.

Vous remarquerez que le code pour styliser l’input radio et le checkbox est quasiment identique, à vous maintenant d’expérimenter, le code dans le codepen est assez évident.

Répondre