Comment obtenir la même largeur d'entrée et sélectionner des champs

109

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 sélectionné 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, 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 pourrais-je obtenir une largeur exactement égale de ces éléments?

— luk4443
source

1

Même question posée ici: stackoverflow.com/questions/895904/…

— BlaM

134

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 box-sizingproprié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 2 pixels que nous avons mentionnée précédemment n'existe pas.

exemple sur 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' selectélément sera toujours inférieur de 2 pixels aux inputéléments.

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

— Gabriele Petrioli
source

Merci pour votre réponse. Et si je définis une bordure pour 2px, il y aura 4 pixels entre les champs d'entrée et de sélection, pour une bordure de 3px - 6px ...?

— luk4443

1

@luk, non. Si l'entrée et la sélection ont la même largeur de bordure, la différence restera à 2 pixels.

— Gabriele Petrioli

Merci. J'essaie votre code dans divers navigateurs et dans Firefox tout va bien, mais cela ne fonctionne pas dans IE 8 et Opera (il y a des différences entre l'entrée et la largeur de sélection) :(

— luk4443

1

Peut-être vouliez-vous spécifier box-sizing: border-box? Je pense que c'est ce que vous vouliez dire. Content-box est la valeur par défaut où le remplissage + les marges ajoutent à la largeur.

— O'Rooney

1

Cela devrait vraiment être: -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-dimensionnement: content-box; taille de la boîte: boîte de contenu; La syntaxe standard doit passer en dernier et suivre la méthodologie d'amélioration progressive afin qu'à l'avenir, lorsque la norme sera largement mise en œuvre, les agents utilisateurs utiliseront par défaut la syntaxe standard et vous pourrez supprimer les versions préfixées.

— user1739635

118

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

— tomsv
source

Oui, il semble que les champs de formulaire, par exemple: zone de texte, les champs de saisie fonctionnent toujours bien avec le modèle de boîte de bordure. Le bouton, la case à cocher, la radio, la soumission, la réinitialisation et l'entrée de recherche sont encadrées par défaut.

— Vennsoh

2

Voici un bon argument pour expliquer pourquoi vous devriez utiliserbox-sizing: border-box . Pour une bonne implémentation universelle, envisagez de définir l'élément html de niveau supérieur, puis d'hériter vers le bas afin qu'il puisse être facilement remplacé.

— KyleMit

content-box n'a rien fait dans mon cas. J'avais besoin de border-box pour qu'ils aient la même largeur. Border-box est certainement la meilleure solution, merci.

— Manuel Hoffmann

5

Ajoutez ce code en css:

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

— 151291
source

-4

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
source