Le remplissage des entrées interrompt la largeur à 100%

Question

Nous savons donc que l'ajout d'un padding à un objet entraîne une modification de sa largeur, même s'il est défini de manière explicite. Bien que l'on puisse discuter de la logique derrière cela, cela pose quelques problèmes avec certains éléments.

Dans la plupart des cas, il suffit d'ajouter un élément enfant et d'ajouter du rembourrage à cet élément au lieu de celui qui est fixé à 100 %, mais pour les entrées de formulaire, cette étape n'est pas possible.

Jetez un coup d'œil à ceci :

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

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

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

<div class='formfield' id='field_text'>
  <div class='formlabel'>No padding</div>
  <div class='formvalue'>
    <textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
  </div>
  <div class='formlabel'>Also no padding</div>
  <div class='formvalue'>
    <input type='text' class='input2' name='apa' value='Or here...' />
  </div>
  <div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
  <div class='formvalue'>
    <input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
  </div>
  <div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
  <div class='formvalue'>
    <input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
  <div class='formvalue'>
    <input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
  <div class='formvalue correct'>
    <input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
  </div>
</div>

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

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

Existe-t-il un moyen d'ajouter du rembourrage à l'intérieur de l'entrée tout en conservant une largeur de 100 % ? Il faut que ce soit 100% car les formulaires s'afficheront dans des parents de largeur différente et je ne connais pas à l'avance la largeur du parent.

Answer 1

En CSS3, vous pouvez utiliser la propriété dimensionnement de la boîte pour modifier la façon dont le navigateur calcule la largeur de la page entrée .

input.input {
    width: 100%;
    box-sizing: border-box;
}

Pour en savoir plus, cliquez ici : http://css-tricks.com/box-sizing/

Answer 2

Je ne sais pas s'il est compatible avec tous les navigateurs (il fonctionne dans firefox et safari), mais vous pouvez essayer cette solution :

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

(Je n'ai affiché que les valeurs que j'ai modifiées)

Answer 3

Une option consiste à envelopper le INPUT dans un DIV qui contient le rembourrage.

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 4

J'ai eu quelques problèmes avec quelque chose de similaire. J'ai des tds avec des entrées de 100% et un petit remplissage. Ce que j'ai fait, c'est compenser le padding 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 padding de l'input/textarea. J'espère que cela vous aidera !

Answer 5

Il est possible d'enlever la bordure et l'arrière-plan de la input et l'enfermer à la place dans un div avec border+background et width:100%, et définir une marge sur le input ?