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

将该图像设置为background css类的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

使用glossBtn中的background设置图片，并尝试使用background-size添加高度和宽度......

添加图像图标到输入标签

4 个答案: