CSSスプライトをテキストボックスで使用するには？

Question

テキストボックスにCSSスプライトを使用しようとしています。 画像の大きさは200x50ピクセルで、高さ30px、幅50pxの（25px、25px）（x、y座標）からの画像の一部のみを表示したい。

.img_textbox 
{ 
    background-image: url(images/ff.jpg); 
    background-position: 25px 25px; 
    background-repeat: no-repeat; 
    height: 30px; 
    width: 50px; 
} 

上記の座標は第3の値で決まるため、テキストボックスのテキストによって異なります。

<input type="textbox" name="type" class="img_textbox" value=""> 

私はバックグラウンド位置と背景画像のプロパティを使用しようとしましたが、私の場合はうまくいきませんでした。

どうすればいいですか？どのプロパティまたはタグを使用して動作させる必要がありますか？私はすべての有効な<input type="textbox">でありますかわからない

Answer 1

..事前に...

おかげで私を導いてください、あなたは<textarea>を使用したほうが良いと思います。

CSS：

textarea.img_textbox { 
    background-image: url(images/ff.jpg); 
    background-position: 25px 25px; 
    height: 30px; 
    width: 50px; 
} 

は、HTML：

<textarea class="img_textbox" cols="5" rows="3"> 
    // value 
</textarea> 

Answer 2

背景クラスとそれと透明な背景や内部には国境に適用されていないのはなぜ？

CSS：

.img_textbox_back 
{ 
    background-image: url(images/ff.jpg); 
    background-position: 25px 25px; 
    background-repeat: no-repeat; 
    height: 30px; 
    width: 50px; 
} 

.img_textbox 
{ 
    background-color:transparent; 
} 

HTML：

<div class="img_textbox_back"> 
    <input class="img_textbox" /> 
</div> 

Answer 3

あなたはすべて、または何か他の画像が表示されませんか？私のスプライトで

は、私はこのような位置を使用します。

.sprt {background-image:url("<path>");background-repeat:no-repeat;} 
    .arrow{ 
     background-position:-25px -25px; 
     width:50px;height:30px; 
    } 

は、それから私は、矢印

ノートを表示する<span class="sprt arrow"></span>を使用して「 - 」この座標の前に。

これを試してもよろしいですか？

textarea.img_textbox { 
    background-image: url("images/ff.jpg"); 
    background-position: -25px -25px; 
    height: 30px; 
    width: 50px; 
} 

Answer 4

demo fiddleのようなものですか？

HTML：

<span></span><input type="text" /> 

CSS：

span { 
    background: url('images/ff.jpg') no-repeat 25px 25px; 
    position: absolute; 
    width: 75px; 
    height: 55px; 
    z-index: -1; 
} 
input { 
    background: transparent; 
} 

注テキストボックスは通常のフローは、テキストボックス（の大きさ）を備えていることを保証するために、スパン内ではないこと。

もちろん、イメージを表示するには、テキストボックスの高さを指定する必要があります。または、textarea要素を使用することもできます。