Comment définir la même largeur HTML de saisie de texte et de tomber d'entrée

J'ai les deux éléments HTML comme ceci:

<input type="text">

et

<select>
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Grapes</option>
</select>

Je ne suis pas capable de le faire de la même largeur. Peu importe ce que la largeur je précise pour les DEUX éléments, à 100% ou à 200px ou que ce soit, la liste déroulante, semble toujours être sur 5px plus courte que la zone de texte. Ce qui se passe dans IE, Firefox et Chrome sous WINDOWS.

Comment puis-je les mettre de la même largeur?

Solution

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

OriginalL'auteur | 2011-02-23

  1. 5

    Prendre un coup d'oeil à cet Exemple de travail

    Vous pouvez modifier le CSS juste pour le garder comme:

    input, select
 {
    width:250px;        
 }
    +1 ne résout pas complètement le problème depuis que je suis obligé de définir une bordure personnalisée pour atteindre 100% de la largeur de l'égalité. J'ai remarqué que vous devrez obligatoirement la frontière pour le faire fonctionner et il détruit le natif de regarder et se sentir. J'aimerais avoir le natif de la frontière pour les contrôles. Mais il résout la largeur de la question.
    Meilleure option si loin... afin de le marquer comme réponse. Mais je tiens vraiment à les laisser de côté de la frontière et être en mesure de régler la largeur.
    Merci de me présenter à la box-sizing de la propriété. Après quelques tests, j'ai constaté que lorsque je l'ai mis à border-box plutôt que content-box, - je obtenir l'effet désiré SANS frontière.

    OriginalL'auteur

  2. 2

    Pourquoi ne pas le faire?

    input[type="text"] {
   width: 200px;
}

select {
   width: 205px;
}
    Vraiment astucieux et pratique 🙂 mais je suis le genre de personne qui n'a pas réussi à trouver le sommeil après avoir fait un "hack". Je suis curieux.. pourquoi n'auraient-ils pas être de la même largeur? Et votre solution... la différence de largeur peut augmenter jusqu'à 10px ou à une diminution de 0 en fonction du thème également. Que ferais-je alors?
    oui, désolé, je ne pouvais pas résister. Il a toujours été une douleur pour le style de la <select> élément. Je ne suis pas sûr de ce que tu veux dire sur le thème - ne pouvez-vous pas ajuster la largeur des éléments sur un thème par thème de base? Je pense que c'est le meilleur que vous pouvez faire.
    Par thème, je voulais thème Windows - Like Classique de Windows, Windows XP, Windows 7 thème par Défaut. Chaque thème windows définit les différentes largeurs de la bordure et des effets 3d pour les contrôles etc.. je me demandais si CEUX qui vont affecter la largeur de quelques pixels à chaque fois. Je ne serais pas en mesure de régler pour ceux..
    ah, ok. Je pense que dans ce cas, vous allez avoir à choisir entre l'abandon de la maternelle look & feel et d'obtenir les entrées exactement de la même taille dans tous les OS.

    OriginalL'auteur