Das Auffüllen innerhalb der Eingänge unterbricht die Breite um 100%

Ok, wir wissen also, dass das Festlegen des Auffüllens für ein Objekt dazu führt, dass sich seine Breite ändert, selbst wenn es explizit festgelegt wird. Während man die Logik dahinter argumentieren kann, verursacht sie einige Probleme mit einigen Elementen.

In den meisten Fällen fügen Sie einfach ein untergeordnetes Element hinzu und fügen diesem statt dem auf 100% festgelegten Element eine Auffüllung hinzu. Bei Formulareingaben ist dies jedoch kein möglicher Schritt.

Schau dir das an: http://sandman.net/test/formcss.html

Beim zweiten Eingang ist die Auffüllung auf 5 Pixel eingestellt, was ich der Standardeinstellung sehr vorziehe. Leider wächst die Eingabe dadurch in alle Richtungen um 10 Pixel, einschließlich des Hinzufügens von 10 Pixel zur 100% -Breite.

Das Problem hierbei ist, dass ich der Eingabe kein untergeordnetes Element hinzufügen kann, sodass ich es nicht beheben kann. Die Frage ist also:

Gibt es eine Möglichkeit, dem Eingang eine Auffüllung hinzuzufügen, während die Breite 100% bleibt? Es muss 100% sein, da die Formulare in Eltern unterschiedlicher Breite gerendert werden, sodass ich die Breite der Eltern nicht im Voraus kenne.

Mit CSS3 können Sie die Größe des Eigenschaftsfelds verwenden, um zu ändern, wie der Browser die Breite der Eingabe berechnet .

  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+ */
  }

Sie können mehr darüber hier lesen: http://css-tricks.com/box-sizing/

Ich weiß nicht, wie browserübergreifend es kompatibel ist (es funktioniert in Firefox und Safari), aber Sie könnten diese Lösung ausprobieren:

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

(Nur die Werte gepostet, die ich geändert habe)

Eine Möglichkeit besteht darin, das INPUTin ein zu wickeln, das DIVdie Polsterung hat.

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>

Das oft Vergessene calckann hier zur Rettung kommen:

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

Da wir wissen, dass die Auffüllung die Breite des Elements erhöht, subtrahieren wir einfach die Auffüllung von der Gesamtbreite. Es wird von allen gängigen Browsern unterstützt, reagiert und erfordert keine chaotischen Wrapper-Divs.

Ich hatte einige Probleme mit etwas Ähnlichem. Ich habe tds mit Eingängen von 100% und einer kleinen Polsterung. Was ich getan habe, war die Polsterung auf dem td wie folgt zu kompensieren:

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

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

Auffüllen von 8px, um den Rand und das Auffüllen des Eingabe- / Textbereichs einzuschließen. Hoffe das hilft!

Nehmen Sie vielleicht den Rand + Hintergrund vom inputund schließen Sie ihn stattdessen in einen divmit Rand + Hintergrund und Breite: 100% ein und setzen Sie einen Rand auf den input?

Eine Lösung, die ich gefunden habe, besteht darin, die Eingabe absolut mit einem relativ positionierten übergeordneten Tag zu positionieren.

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

Die wenden den Stil an:

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

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

Das einzige, was Sie beachten müssen, ist, dass das Absatz-Tag eine Höheneinstellung benötigt, da seine absolut positionierten untergeordneten Elemente seine Höhe nicht erweitern. Dies vermeidet die Notwendigkeit des Einstellens, width: 100%indem es an der linken und rechten Seite des übergeordneten Elements gesperrt wird.

Versuchen Sie, Prozentsätze für Ihre Polsterung zu verwenden:

.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%; 

}

Wenn Sie sich Sorgen über Benutzer in alten Browsern machen, die den Box-Shadow nicht sehen können, geben Sie der Eingabe als Backup einfach eine subtile Hintergrundfarbe. Wenn Sie Pixel für diese Art von Dingen verwenden, besteht die Möglichkeit, dass Sie sie an anderer Stelle verwenden, was einige zusätzliche Herausforderungen mit sich bringen könnte. Lassen Sie mich wissen, wenn Sie auf sie stoßen.

Ich weiß nur, dass ich Werte wie diese 100% -10 zuweisen kann, um dies zu verhindern. Es gibt jedoch einige Kompatibilitätsprobleme.