CSS : définir la taille d’un champ texte

Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.

Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />

En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

En CSS, la propriété width définit la largeur d’un élément et est exprimée en pixels (px), points (pt), pourcentage (%) ou em.

Dans notre exemple, notre champ ayant un ID appelé “recherche”, il suffit de lui ajouter :

#recherche {width:15em;}

Et voilà. Notre champ est désormais clairement défini et s’intègre comme il se doit dans le design.

Envie d'ajouter des fonctionnalités exceptionnelles à votre site WordPress ou WooCommerce? Je suis là pour vous aider.

Explorons les possibilités ensemble »

Articles conseillés :

2 pensées sur “CSS : définir la taille d’un champ texte”

Opinions