带有图标的HTML输入文本

Question

我正在一个网页上工作，我有一个禁用onload的HTML输入文本元素。 我目前在输入容器onclick旁边有一个编辑按钮，我禁用/启用该字段。

<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">

有没有其他方法可以将此图标放在输入标签中，而不会重叠文字。

img.onInput
{
    position: relative;
    left: -20px;
}

我尝试使用CSS但文本位于我不想要的图标下方。

我想在firefox中获得类似“google搜索”插件的内容。用简单的输入文字和图标可以实现这一点吗？

提前致谢：）

更新： 我想在文本输入中使用此图像中的按钮。该图标是可点击的，我想触发一个JavaScript函数onClick事件。

找到我要找的答案：https://stackoverflow.com/a/6258628/2596762

Answer 1

您可以使用background属性创建一个CSS类，并指定图像的位置，将其设置为no-repeat，这样它只显示一次图像，然后通过添加填充属性等来调整定位。

所以对于你的CSS，例如：

.search {
    background: url('image.jpg') no-repeat;
}

然后，您只需将其作为class属性添加到文本框标记中：

<input type="text" name="TxtBx1" id="TxtBx1" class="search">

Answer 2

  background: url(user.gif) no-repeat scroll 7px 7px;
  padding-left:30px;

Answer 3

尝试使用：

<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<a href="#"><img src="image-url" /></a></div>

这是css代码：

.search-div{
  border:1px;
  border-style:solid;
  border-color: lightgrey;
}
.search{
border:none;
}

这个css会使div看起来像一个文本框，并删除输入文本框的轮廓。 您可以格式化图像链接的大小，也可以更改＃34;＃＆＃34;的链接地址。到所需的网址。