Inputfield avec largeur 100% "atteint" dans le rembourrage

Question

J'ai une nappe avec un inputfield. L'Inputfield doit remplir la nappe mais ne pas atteindre son rembourrage. Ce que j'ai ressemble à ceci (avec Firebug):

Je veux que l'Inputfield soit conservé dans la zone bleue et ne pas racher dans le violet.

et: bien sûr, j'ai lu toutes les questions ici sur ce sujet en premier. Je lis tout cela et je ne pouvais trouver aucune réponse qui a résolu ce problème.

Il devrait fonctionner dans tous les navigateurs modernes (IE7 également);

J'ai fait un exemple minimal avec jsfiddle où j'ai essayé toutes les solutions dans les autres questions Mais je ne pouvais tout simplement pas obtenir cela pour travailler. a) y a-t-il une solution de travail pour cela? and b) y a-t-il même une solution agréable et non solariante pour cela?

Pourquoi est-ce un problème dans tous les navigateurs? Je pense que c'est une spécification erronée dans le CSS. Parce que si je dis "100%" bien sûr, je veux que l'élément soit adapté à "100%" de la zone de contenu. Quel est le cas d'utilisation pour le laisser circuler dans des pagaiants et des marges?

Answer 1

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

Answer 2

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

Answer 3

I think you should try to use

box-sizing: border-box