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

Question

Sur le formulaire, j'ai un sélecteur et deux champs de saisie. Ces éléments sont alignés verticalement. Malheureusement, je n'arrive pas à obtenir une largeur égale pour ces éléments.

Voici mon code :

  valeur1
  valeur2

Pour l'exemple ci-dessus, la meilleure largeur pour l'élément de sélection est de 198 ou 199 px (bien sûr j'ai essayé avec 193px, mais la différence est majeure). Je pense que cela dépend de la résolution, des différents ordinateurs et navigateurs étant donné que ces éléments n'ont pas des largeurs égales (parfois je pense que la différence est d'environ 1 ou 2 px). J'ai essayé de placer ces éléments dans une balise div ou des lignes de tableau, mais cela ne résout pas le problème.

Q : Comment pourrais-je obtenir une largeur précisément égale pour ces éléments?

Answer 1

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 la propriété 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 dont nous avons parlé plus tôt n'existe pas..

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

note : Sur IE, cela fonctionne à partir de la version 8 et ultérieure..

---

Original

si vous réinitialisez leurs contours alors l'élément select sera toujours de 2 pixels de moins que les éléments input..

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

Answer 2

J'ai essayé la réponse de Gaby ci-dessus (+1) mais cela n'a résolu mon problème que partiellement. À la place, 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;
}

Answer 3

Ajoutez ce code dans le fichier css :

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

Answer 4

Tout d'abord, définissez la largeur de chaque élément de manière égale, dans votre cas une largeur de 193px ou 198px. Ensuite, vous pouvez suivre l'une des méthodes ci-dessous.

a. ajoutez cette ligne box-sizing: border-box; dans le style que vous avez choisi et saisissez. tout comme style="width:198px; box-sizing: border-box;"

ou

b. ajoutez ces lignes dans votre CSS (que vous utilisiez un CSS externe ou interne).

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

Answer 5

Dans votre section css, vous devez simplement ajouter "box-sizing:content-box;". J'ai eu le même problème et j'ai pu le résoudre de cette manière.