Le remplissage dans les entrées coupe la largeur de 100%

Ok, nous savons donc que la définition du remplissage sur un objet entraîne une modification de sa largeur même si elle est définie explicitement. Bien que l'on puisse discuter de la logique derrière cela, cela pose 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 celui défini à 100%, mais pour les entrées de formulaire, ce n'est pas une étape possible.

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

La deuxième entrée a son remplissage réglé à 5px, ce que je préfère de beaucoup au paramètre par défaut. Mais malheureusement, cela fait augmenter l'entrée de 10 pixels dans toutes les directions, y compris l'ajout de 10 pixels à la largeur de 100%.

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

Existe-t-il un moyen d'ajouter un remplissage à l'intérieur de l'entrée tout en conservant la largeur à 100%? Il doit être à 100% car les formulaires seront rendus dans des parents de largeur différente, donc je ne connais pas à l'avance la largeur du parent.

En utilisant CSS3, vous pouvez utiliser la propriété box-sizing pour modifier la façon dont le navigateur calcule la largeur 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 savoir plus ici: http://css-tricks.com/box-sizing/

Je ne sais pas à quel point il est compatible avec tous les navigateurs (cela fonctionne dans Firefox et Safari), mais vous pouvez essayer cette solution:

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

(Seulement publié les valeurs que j'ai modifiées)

Une option consiste à envelopper le INPUTdans unDIV 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>

Les souvent oubliés calcpeuvent venir à la rescousse ici:

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

Puisque nous savons que le remplissage ajoutera à la largeur de l'élément, nous soustrayons simplement le remplissage de la largeur globale. Il est pris en charge par tous les principaux navigateurs, est réactif et ne nécessite pas de div wrapper en désordre.

J'ai eu des problèmes avec quelque chose de similaire. J'ai des tds avec des entrées de 100% et un petit rembourrage. Ce que j'ai fait, c'est 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%;
}

padding de 8px pour inclure la bordure et le remplissage de la zone d'entrée / de texte. J'espère que cela t'aides!

Supprimez peut-être la bordure + l'arrière-plan du input, et placez-le plutôt dans un divavec bordure + arrière-plan et largeur: 100%, et définissez une marge sur le input?

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

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

Le 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 à savoir est que la balise de paragraphe a besoin d'un réglage de hauteur car ses enfants positionnés de manière absolue n'augmenteront pas sa hauteur. Cela évite la nécessité de définir width: 100%en le verrouillant sur les côtés gauche et droit de l'élément parent.

Essayez d'utiliser des pourcentages pour votre rembourrage:

.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 vous inquiétez pour les utilisateurs d'anciens navigateurs qui ne peuvent pas voir l'ombre de la boîte, donnez simplement à l'entrée une couleur d'arrière-plan subtile comme sauvegarde. Si vous utilisez des pixels pour ce genre de choses, 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.

La seule chose que je sais pour éviter cela est d'attribuer des valeurs comme celles-ci 100% -10. Mais il a quelques problèmes de compatibilité tho.