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

将该图像设置为backgroundcssglossyBtn类的图像。

使用本地图像更改图像路径。

.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

在glossyBtn中设置图像background并尝试background-size添加高度和宽度......