Html 将图像图标添加到输入标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12265190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add image icon to input tag
提问by Masriyah
I want to add and icon image to an input tag and was wondering if anyone has some input on the topic.
我想将图标图像添加到输入标签，并且想知道是否有人对该主题有一些输入。
my current input tag:
我当前的输入标签：
<input class="glossyBtn" type="submit" name="button" style="vertical-align: middle" value="Select"/>
my image that i want to add to the input so it will be to the left of the text (Value):
我想添加到输入中的图像，使其位于文本（值）的左侧：
<img alt="" style="vertical-align: middle" src="<%:Url.Content("~/Content/images/user.png")%>" />
Thanks ahead!
先谢谢了！
回答by Shyju
Set that image as the backgroundof the glossyBtncss class.
设置图像作为background该的glossyBtnCSS类。
Change the image path with your local image.
使用本地图像更改图像路径。
.glossyBtn
{
background-image:url('http://i50.tinypic.com/20keohf.jpg');
background-repeat:no-repeat;
background-position:left top; padding-left:15px;
}
Working sample : http://jsfiddle.net/6Nfvz/13/
工作示例：http: //jsfiddle.net/6Nfvz/13/
回答by Lowkase
If the image needs to be clickable you can build out a more complex control:
如果图像需要可点击，您可以构建一个更复杂的控件：
<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.");
});?
If the image doesn't have a click event associated to it then follow the advice by others and include it as a background image.
如果图像没有关联的点击事件，则遵循其他人的建议并将其包含为背景图像。
回答by Carlos
Try this. please set image path and padding accordingly
尝试这个。请相应地设置图像路径和填充
.glossyBtn {
background:url(../Content/images/user.png) left top no-repeat;
padding-left:15px;
}
回答by Arpit Srivastava
Set the image using backgroundin glossyBtn and also try background-sizefor adding height and width...
background在glossyBtn 中使用设置图像并尝试background-size添加高度和宽度...
