CSSスプライトでフォーム要素に背景画像を配置する

Question

入力要素の背景として虫めがねを取得しようとしています。

それを配置するために、私が使用したこれらのプロパティ：虫眼鏡のアイコンは次のようになりますCSSスプライトの一部である

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

しかし、背景は、まだ上部に表示されます入力ボックスの縦の中央と左に揃えて配置するのではなく、私もやってみました：

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

をが、それはどちらか動作しません。任意の助け

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

ありがとう：それは問題にした場合

は、私はそれを推測しているが、ここに私のフォームマークアップだしません。

Answer 1

background-positionを2回宣言しました。 backgroundショートハンドプロパティの最後の最初のもの、次の行の2番目のもの。 ソリューション：スプリットこの（さらに、0 -24pxが正しい値である）のようにすべての単一backgroundのルール：

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

そして今、あなたのデザインに本当の問題に直面することができます：他のスプライトを入力して表示されますがそれらの間に十分なスペースがない場合は、領域。