0

我正在处理一个网页，其中有一个 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 中获得类似“谷歌搜索”插件的东西。使用简单的输入文本和图标就可以实现吗？

提前致谢 ：）

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

找到了我正在寻找的答案：https ://stackoverflow.com/a/6258628/2596762

4

3 回答 3

4

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

因此，对于您的 CSS，类似于：

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

然后你只需将它作为类属性添加到你的文本框标签：

<input type="text" name="TxtBx1" id="TxtBx1" class="search">
于 2013-08-29T17:16:06.820 回答
1 
  background: url(user.gif) no-repeat scroll 7px 7px;
  padding-left:30px;
于 2015-10-18T11:18:26.183 回答
0

尝试使用这个：

<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 看起来像一个文本框，并删除输入文本框的轮廓。您可以格式化图像链接的大小，也可以将链接地址从“#”更改为所需的 url。

于 2014-07-02T05:01:54.570 回答