Largeur de la saisie par rapport à la largeur de la zone de texte

Question

Après avoir lu le fil de discussion Taille de l'entrée par rapport à la largeur

Il est clair que nous ne devons pas utiliser l'attribut size mais le style css.

Quelle sera la css inter-facteurs qui montrera exactement la même largeur pour l'input[text] et le textarea ?

BTB, j'ai essayé

#idInputText, #idTextArea {
font: inherit;
width: 60ex;

}

Est-ce correct ? Y a-t-il une meilleure solution ?

Merci d'avance pour toute aide.

Answer 1

Vous obtiendrez probablement des résultats plus cohérents avec les différents navigateurs en appliquant d'abord une réinitialisation CSS. Cet article présente quelques bons exemples :

https://stackoverflow.com/questions/116754/best-css-reset

Une fois que vous avez éliminé les différences subtiles entre les navigateurs en matière de remplissage et de marges, votre largeur principale de 60ex devrait permettre d'aligner les entrées.

Answer 2

Le remplissage natif des éléments de saisie de texte diffère. Vous devrez attribuer une largeur différente aux éléments de saisie et aux éléments textarea et faire des essais.

#form input.textfield { width:10em; }
#form textarea { width:9em; }

Il suffit de lancer quelques styles par défaut (je préfère les ems), d'ouvrir Firebug et d'expérimenter en modifiant les valeurs de taille.

J'ai l'habitude de jeter un class=textfield en <input type=text> donc je ne cible pas <input type=submit> ou similaire.

Answer 3

J'éviterais une réinitialisation CSS générique, mais j'utiliserais quelque chose comme ceci :

input[type="text"], input[type="password"], textarea {
    width: 60ex;
    margin: 0;
    padding: 2px; /* it's best to have a little padding */
    border: 1px solid #ccc; /* gets around varying border styles */
    border-radius: 4px /* optional; for newer browsers */
}

Tant que vous êtes en mode standard et non en mode bizarrerie, cela devrait fonctionner correctement pour la plupart des navigateurs.

Notes :

• Les sélecteurs d'attributs - [type="text"] - ne fonctionnent pas dans IE6. Vous pouvez donc opter pour un nom de classe à la place.
• Il est impossible de faire en sorte que tous les navigateurs affichent les champs de formulaire exactement de la même manière.
• L'utilisation de l'ex comme unité, bien que ce soit une bonne idée, pourrait ne pas fonctionner correctement dans un environnement à largeur de pixel fixe.

Answer 4

Utilisez des valeurs en pixels plutôt que des valeurs EM ou pct. 60px = 60px sur tous les navigateurs, quelle que soit la taille de la police de base.

Answer 5

Je suis en retard pour cette fête, mais au cas où quelqu'un rencontrerait ce problème et aurait besoin d'utiliser des ex pour la largeur, j'ai finalement réussi à le faire fonctionner.

Les zones de texte utilisent par défaut la police monospace. Vous devez donc passer outre. Ce fichier css a fonctionné pour moi :

input[type="text"], textarea {
  font-family: Arial, sans-serif;
  border: 2px groove;
  padding: 2px;
  margin: 10px;
  width: 35ex;
}

Voici un violon pour démontrer : https://jsfiddle.net/Lxahau9c/