Html 将图像图标添加到输入标记

我想在输入标签中添加图标和图像，我想知道是否有人对这个主题有一些意见

我当前的输入标签：

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

我要添加到输入中的图像，使其位于文本左侧（值）：

“/>

---

谢谢！将该图像设置为

glossyBtn

css类的

背景

使用本地映像更改映像路径

工作示例：
尝试此操作。请相应地设置图像路径和填充

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

使用glossyBtn中的
background
设置图像，并尝试
background size
添加高度和宽度…
如果图像需要可单击，您可以构建更复杂的控件：



​
.con{width:180px；position:relative；border:1px solid#ccc；}
.con输入{margin:0 4px；border:0；}
.con img{显示：块；位置：绝对；顶部：4px；左侧：164px；光标：指针；}​
$（“.con img”）。单击（函数（）{
警报（“调用了.click（）的处理程序”）；
});​

如果图像没有关联的单击事件，则按照其他人的建议将其作为背景图像包含。
当我尝试此操作时，整个输入的背景变为白色。当我尝试添加背景大小：16px 16px时，它仍然没有影响。我不希望背景颜色改变，因为这非常有效。我在自己的类中对上述属性进行了一些修改，使我的类为“glossyBtn addIcon”，并将其添加到addIcon:hover中。谢谢！@Amina:非常欢迎您。很高兴我能提供帮助：）
.glossyBtn
{
    background-image:url('http://i50.tinypic.com/20keohf.jpg');
    background-repeat:no-repeat;
   background-position:left top;  padding-left:15px;
}

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

<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.");
});​