web-dev-qa-db-fra.com

Comment obtenir la même largeur d'entrée et de sélection de champs

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:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Pour l'exemple ci-dessus, la meilleure largeur pour l'élément select est 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, sur divers ordinateurs et navigateurs, car ces éléments n’ont pas la même largeur (parfois, je pense que la différence est d’environ 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 puis-je obtenir exactement la même largeur de ces éléments?

htmlcsshtml-selectborder-box
105
luk4443

Réponse mise à jour

Voici comment changer le modèle de boîte utilisé par les éléments input/textarea/select afin qu’ils se comportent tous de la même manière. Vous devez utiliser le box-sizing propriété 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/

note: On IE il fonctionne à partir de la version 8 et vers le haut ..

Original

si vous réinitialisez leurs bordures alors l'élément select sera toujours inférieur de 2 pixels à l'élément input.

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

130
Gabriele Petrioli

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ù content-box a été changé en border-box:

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

Ajoutez ce code en css:

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