Fügen Sie dem HTML-Texteingabefeld eine Auffüllung hinzu

Ich möchte etwas Platz rechts von an hinzufügen <input type="text" /> sodass auf der rechten Seite des Feldes ein leerer Platz ist.

Also statt würde ich bekommen .

Also dasselbe Verhalten, nur ein leerer Raum rechts.

Ich habe versucht, mit padding-rightaber das scheint nichts zu bringen.

Gibt es eine Möglichkeit, dies zu tun (oder es vorzutäuschen)?

Sie können eine Eingabe wie folgt auffüllen:

HTML:

<input type=text id=firstname />

CSS:

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

aber ich würde 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 Box-Größe bleibt die Eingabebreite bei 250 Pixel, anstatt sich aufgrund der Polsterung auf 260 Pixel zu erhöhen.

Als Referenz.

padding-right funktioniert bei mir in Firefox/Chrome unter Windows, aber nicht im IE. Willkommen in der wunderbaren Welt der Nichteinhaltung von IE-Standards.

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

HTML

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

CSS

.foo
{
    padding-right: 20px;
}

padding-right sollte funktionieren. Beispiel verlinkt.

http://jsfiddle.net/8Ged8/

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;
}

Sie können dies lösen, indem Sie die input tag innerhalb a divdann setze die Eigenschaft padding auf on div Schild. Diese Arbeit ist für mich…

So was:

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

und CSS:

.paded{
    padding-right: 20px;
}

<input class="form-control search-query input_style" placeholder="Search…"  name="" title="Search for:" type="text">


.input_style
{
    padding-left:20px;
}