html - 入力タグに画像アイコンを追加

Question

入力タグにアイコン画像を追加したいのですが、トピックに関する入力があるかどうか疑問に思っていました。

私の現在の入力タグ：

 <input class="glossyBtn"  type="submit" name="button" style="vertical-align: middle" value="Select"/>

テキスト（値）の左側になるように入力に追加したい画像：

<img alt="" style="vertical-align: middle" src="<%:Url.Content("~/Content/images/user.png")%>" />

よろしくお願いします！

Answer 1

その画像をcss クラスbackgroundのとして設定します。glossyBtn

イメージ パスをローカル イメージに変更します。

.glossyBtn
{
    background-image:url('http://i50.tinypic.com/20keohf.jpg');
    background-repeat:no-repeat;
   background-position:left top;  padding-left:15px;
}

作業サンプル: http://jsfiddle.net/6Nfvz/13/

Answer 2

画像をクリック可能にする必要がある場合は、より複雑なコントロールを構築できます。

http://jsfiddle.net/NXAuT/1/

<div class="con">
    <input type="text" />
    <img src="MY_IMAGE.PNG" />
</div>​

.con { width:180px; position:relative; border:1px solid #ccc; }
.con input { margin:0 0 0 4px; border:0; }
.con img { display:block; position:absolute; top:4px; left:164px; cursor:pointer; }​

$(".con img").click(function() {
  alert("Handler for .click() called.");
});​

画像にクリックイベントが関連付けられていない場合は、他の人のアドバイスに従い、背景画像として含めます。

Answer 3

これを試して。それに応じて画像パスとパディングを設定してください

.glossyBtn {
background:url(../Content/images/user.png) left top no-repeat;
padding-left:15px;
}

Answer 4

backgroundglosyBtn で使用して画像を設定し、background-size高さと幅を追加してみてください...