Changer l’apparence de ses labels en version mobile

Petite astuce css toute bete, ici on va voir comment modifier les labels de ses formulaires simplement grace au css et pseudo élement: on a ici deux apparences, mobile ou desktop , d’un meme formulaire.Grace au css on change l’apparence du formulaire en fonction du device utilisé.Comme on le voit sur l’image, le label « ET » devient « & » en version mobile.

 

mobile

desktopform

C’est tout simple, il suffit de cacher le label avec un display:none, ou visibility hidden plutot, et de remplacer cet espace vide par un autre terme grace au pseudo element « before » ou « after »:

ul#contact > li:nth-child(3) form li:nth-child(2) label:nth-child(3){visibility:hidden}
ul#contact > li:nth-child(3) form li:nth-child(2) label:nth-child(3):before{content:'&';width:20px;padding-top: 6px;display:block;height:auto;font-size: 1.5em;visibility: visible;}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.