Rembourrage à l'intérieur des ruptures des ruptures 100%

Question

Ok, nous savons donc que le fait de définir un remplissage à un objet entraîne une modification de sa largeur même s'il est défini explicitement. Bien que l'on puisse argumenter sur la logique derrière cela, cela cause des problèmes avec certains éléments.

Dans la plupart des cas, vous ajoutez simplement un élément enfant et ajoutez un remplissage à celui-ci au lieu de 100%, mais pour les entrées de formulaire, ce n'est pas une étape possible.

Jetez un oeil à ceci: http://sandman.net/test/formcss.html

La deuxième entrée a son rembourrage réglé sur 5px que je préfère de beaucoup le réglage par défaut. Mais malheureusement, cela fait croître l'entrée de 10px dans toutes les directions, y compris en ajoutant 10px à la largeur de 100%.

Le problème ici est que je ne peux pas ajouter un élément enfant à l'intérieur de l'entrée, donc je ne peux pas le réparer. Donc la question est:

Y at-il un moyen d'ajouter un rembourrage à l'intérieur de l'entrée tout en gardant la largeur de 100%? Il faut être à 100% puisque les formes seront rendues en parents de largeur différente donc je ne connais pas la largeur du parent à l'avance.

Answer 1

Je ne sais pas comment il est (cela fonctionne dans Firefox et Safari) compatible croix navigateur, mais vous pouvez essayer cette solution:

DIV.formvalue { 
padding: 15px; 
} 
input.input { 
margin: -5px; 
} 

(seulement affiché les valeurs que j'ai changé)

Answer 2

Tout ce que je sais pour éviter cela, c'est d'assigner des valeurs comme 100% -10. Mais il a quelques problèmes de compatibilité.

Answer 3

Peut-être prendre la bordure + arrière-plan du input, et à la place, l'inclure dans un div avec bordure + arrière-plan et la largeur: 100%, et définir une marge sur le input?

Answer 4

Une option consiste à envelopper le INPUT dans un DIV qui a le remplissage.

CSS:

div.formvalue { 
    background-color: #eee; 
    border: 1px solid red; 
    padding: 10px; 
    margin: 0px; 
} 

div.paddedInput { 
    padding: 5px; 
    border: 1px solid black; 
    background-color: white; 
} 

div.paddedInput input { 
    border: 0px; 
    width: 100%; 
} 

HTML:

<div class="formvalue"> 
    <div class="paddedInput"><input type="text" value="Padded!" /></div> 
</div> 

Answer 5

J'ai eu quelques problèmes avec quelque chose de semblable à cela. J'ai tds avec des entrées de 100% et un petit rembourrage. Ce que je faisais était de compenser le rembourrage sur le td comme suit:

.form td { 
    padding-right:8px; 
} 

.form input, .form textarea { 
    border: 1px solid black; 
    padding:3px; 
    width:100%; 
} 

rembourrage de 8px pour inclure la frontière et le rembourrage de l'entrée/textarea. J'espère que cela aide!

Answer 6

Une solution que j'ai trouvée fonctionne est de positionner absolument l'entrée avec une étiquette parente relativement positionnée.

<p class="full-width-input"> 
    <input type="text" class="text /> 
</p> 

L'appliquer le style:

p.full-width-input { 
    position: relative; 
    height: 35px; 
} 

p.full-width-input input.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 5px; 
} 

La seule chose à prendre en compte est que l'étiquette de paragraphe a besoin d'une hauteur définissant comme ses enfants en position absolue n'élargiront pas sa hauteur. Cela évite de devoir définir width: 100% en le verrouillant sur les côtés gauche et droit de l'élément parent.

Answer 7

En utilisant CSS3 vous pouvez utiliser la propriété box-sizing pour modifier la façon dont le navigateur calculer la avec de l'entrée .

input.input { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    } 

Vous pouvez en lire davantage ici: http://css-tricks.com/box-sizing/

Answer 8

Essayez d'utiliser des pourcentages pour votre padding:

.input { 

    // remove border completely 
    border: none; 

    // don't forget to use the browser prefixes 
    box-shadow: 0 0 0 1px silver; 

    // Use PERCENTAGES for at least the horizontal padding 
    padding: 5%; 

    // 100% - (2 * 5%) 
    width: 90%; 

} 

Si vous êtes inquiet au sujet des utilisateurs sur les anciens navigateurs qui ne peuvent pas voir la box-shadow, donne juste une couleur d'arrière-plan subtile à l'entrée comme sauvegarde. Si vous utilisez des pixels pour ce genre de chose, il y a de fortes chances que vous les utilisiez ailleurs, ce qui pourrait présenter quelques défis supplémentaires, faites-moi savoir si vous les rencontrez.

Answer 9

L'souvent oubliée calc peut venir à la rescousse ici:

input { 
    width: calc(100% - 1em); 
    padding: 0.5em; 
} 

Puisque nous savons le rembourrage ajoutera à la largeur de l'élément, on retranche simplement le rembourrage de la largeur totale. Il est pris en charge par tous les principaux navigateurs, est réactif et ne nécessite pas de divs wrapper malpropres.