Le positionnement de l'image de fond sur les éléments de formulaire avec des sprites CSS

Je suis en train d'essayer d'obtenir une loupe comme arrière-plan pour mon entrée de l'élément. L'icône de la loupe est une partie d'un sprite CSS qui ressemble à ceci:

Le positionnement de l'image de fond sur les éléments de formulaire avec des sprites CSS

De position, j'ai utilisé ces propriétés:

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

Mais l'arrière-plan apparaît toujours en haut de la zone de saisie plutôt que alignés dans le milieu vertical et vers la gauche. J'ai aussi essayé de faire:

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

mais cela ne fonctionne pas non plus.

Si c'est important, même si je devine que ce n'est pas le cas, voici mon formulaire de balisage:

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

Merci pour toute aide.

OriginalL'auteur James Dawson | 2012-01-27

  1. 7

    Vous avez déclaré background-position deux fois. Le premier à la fin de la background à court de main de propriété, la seconde sur la ligne suivante. Solution: Split tout seul background règles comme ce (en outre, 0 -24px la valeur correcte):

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

    Et maintenant, vous pouvez affronter le vrai problème avec votre design: autres sprites seront visibles dans la zone de saisie si il n'y a pas suffisamment d'espace entre eux.

    Bonne prise/répondre!
    Merci! Je pensais qu'il y aurait un moyen de le faire sans ajouter de l'espace entre mes sprites, mais apparemment pas. 🙂
    Habituellement, vous avez juste besoin de mettre le sprite dans une boîte qui est exactement grand que la taille de l'icône. Unfortunaly vous ne pouvez pas faire cela, parce que vous ne pouvez pas avoir les éléments de bloc à l'intérieur d'une zone de saisie.

    OriginalL'auteur lorenzo-s