Comment obtenir une largeur égale de champs de saisie et de sélection

Sur le formulaire, j’ai un champ de sélection et deux champs de saisie. Ces éléments sont alignés verticalement. Malheureusement, je ne peux pas obtenir la même largeur de ces éléments.

Voici mon code:

 value1 value2 

Pour l’exemple ci-dessus, la meilleure largeur pour l’élément select est de 198 ou 199 px (bien sûr, j’ai essayé 193px, mais la différence est majeure). Je pense que cela dépend de la résolution, de divers ordinateurs et navigateurs, car ces éléments n’ont pas la même largeur (parfois, je pense que la différence est de 1 ou 2 px). J’ai essayé de définir ces éléments dans des lignes div ou table, mais cela n’aide pas.

Q: Comment pourrais-je obtenir exactement la même largeur de ces éléments?

Réponse mise à jour

Voici comment modifier le modèle de boîte utilisé par les éléments input / textarea / select pour qu’ils se comportent tous de la même manière. Vous devez utiliser la propriété de box-sizing qui est implémentée avec un préfixe pour chaque navigateur.

 -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; 

Cela signifie que la différence de 2px mentionnée précédemment n’existe pas.

exemple à http://www.jsfiddle.net/gaby/WaxTS/5/

remarque: sur IE, cela fonctionne à partir de la version 8 et plus.


Original

Si vous réinitialisez leurs bordures, l’élément select aura toujours 2 pixels de moins que les éléments en input .

exemple: http://www.jsfiddle.net/gaby/WaxTS/2/

J’ai essayé la réponse de Gaby (+1) ci-dessus mais cela n’a que partiellement résolu mon problème. Au lieu de cela, j’ai utilisé le CSS suivant, où la zone de contenu a été modifiée en border-box:

 input, select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

Ajoutez ce code dans css:

  select, input[type="text"]{ width:100%; box-sizing:border-box; } 

créer une autre classe et augmenter la taille avec l’exemple 2px

 .enquiry_fld_normal{ width:278px !important; } .enquiry_fld_normal_select{ width:280px !important; }