将图像图标添加到输入标签

我想将图标图像添加到输入标签并想知道是否有人对该主题有一些输入。将图像图标添加到输入标签

我的电流输入标签：

<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")%>" />

谢谢！

来源

2012-09-04 Masriyah

设定该图像作为glossyBtn CSS类的background。

变化与当地图像的图像路径。

.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/

来源

2012-09-04 14:07:00 Shyju

感谢这很好。我做了一些改变，使他们自己的类中的上述属性，以便我的类是“glossyBtn addIcon”，并将其添加到addIcon：hover。谢谢！ – Masriyah

@Amina：你是最受欢迎的。很高兴我可以帮助:) – Shyju

试试这个。请将图像路径，并相应地填充

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

来源

2012-09-04 14:07:23 Carlos

当我试过这整个输入的背景变成了白色。当我尝试添加background-size：16px 16px时，它仍然没有影响。我不希望背景颜色改变 – Masriyah

设置使用glossyBtn background，也是图像尝试background-size添加高度和宽度...

来源

2012-09-04 14:09:31

如果图像需要可以点击就可以打造出更复杂的控制：

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

如果图像没有click事件作为与其相关联，然后遵循其他人的建议并将其作为背景图像。

来源

2012-09-04 14:18:26 Lowkase

将图像图标添加到输入标签

回答

相关问题