Positionierung Hintergrundbild auf dem Formular-element mit CSS-sprites

Ich versuche zu bekommen eine Lupe, die als hintergrund für meine input-element. Die Lupe ist Teil eines CSS-sprite, der wie folgt aussieht:

Positionierung Hintergrundbild auf dem Formular-element mit CSS-sprites

Positionieren, ich habe diese Eigenschaften:

#search-form input[type="text"] {
    background: url('../images/icons.png') no-repeat left center;
    background-position: 0px -30px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

Aber der hintergrund scheint immer noch an der Spitze des input-Feld statt, ausgerichtet in der vertikalen Mitte und auf der linken Seite. Ich habe auch versucht zu tun:

background: url('../images/icons.png') no-repeat left middle;

aber das funktioniert auch nicht.

Wenn es darauf ankommt, obwohl ich vermute, es nicht, hier mein Formular-markup:

<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>

Vielen Dank für jede Hilfe.

InformationsquelleAutor James Dawson | 2012-01-27

  1. 7

    Deklariert background-position zwei mal. Der erste am Ende der background short-hand-property, die zweite in der nächsten Zeile. Lösung: Split, alle einzelnen background Regeln wie diese (zusätzlich 0 -24px ist der richtige Wert):

    #search-form input[type="text"] {
    background-image: url('http://i.stack.imgur.com/MFpLm.png');
    background-repeat: no-repeat;
    background-position: 0 -24px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

    Und jetzt können Sie das Gesicht der wirkliche problem mit dem design: andere sprites sichtbar im Eingangsbereich, wenn gibt es nicht genügend Raum zwischen Ihnen.

    Guter Fang/Antwort!
    Danke! Ich dachte, es wäre ein Weg, dies zu tun, ohne das hinzufügen von zusätzlichen Platz zwischen meine sprites, aber anscheinend nicht. 🙂
    In der Regel müssen Sie nur wickeln Sie das sprite in einer box, die ist genau groß wie die icon-Größe. Da Sie dies nicht können, weil Sie nicht haben, können block-Elemente innerhalb einer input-box.

    InformationsquelleAutor lorenzo-s

Schreibe einen Kommentar