it-swarm.com.de

Füllen Sie das HTML-Texteingabefeld auf

Ich möchte etwas Platz rechts von einem <input type="text" /> hinzufügen, so dass rechts neben dem Feld etwas Platz ist.

Also statt Würde ich bekommen .

Also dasselbe Verhalten, nur ein paar Leerzeichen auf der rechten Seite.

Ich habe padding-right ausprobiert, aber das scheint nichts zu tun.

Gibt es eine Möglichkeit, dies zu tun (oder es zu fälschen)?

43
Nathan

padding-Right funktioniert für mich in Firefox/Chrome unter Windows, aber nicht im IE. Willkommen in der wundervollen Welt von IE Nichteinhaltung von Standards.

Siehe: http://jsfiddle.net/SfPju/466/

HTML

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>

CSS

.foo
{
    padding-right: 20px;
}
60
evan

Sie können eine Eingabe wie folgt mit Padding versehen:

HTML:

<input type=text id=firstname />

CSS:

input {
    width: 250px;
    padding: 5px;
}

ich würde jedoch auch hinzufügen:

input {
    width: 250px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Durch die Größenanpassung der Box bleibt die Eingabebreite bei 250px und wird nicht durch die Auffüllung auf 260px erhöht.

Als Referenz .

80
Greg

polsterung sollte funktionieren. Beispiel verlinkt.

http://jsfiddle.net/8Ged8/

5
Jeff Parker

HTML

<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>

Für andere Browser:

.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}

Für IE:

.FieldElement input {
width: 380px;
border:0;
}

.FieldElement {
 border:1px solid #ccc;
 width: 455px;     
 }

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}
2

sie können dieses Problem lösen, indem Sie das input-Tag in ein div, nehmen und dann die padding-Eigenschaft auf div-Tag setzen. Diese Arbeit ist für mich ...

So was:

<div class="paded">
    <input type="text" />
</div>

und css:

.paded{
    padding-right: 20px;
}
0
Carlos Rafael