jquery - 如何在我的搜索输入中添加搜索图标

Question

我有以下代码来显示搜索输入，如下所示：-

<form method="GET" action="@Url.Action("Search", "Home")">
<input   placeholder="Search" name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"  />
</form>

但是我如何修改我的搜索输入以获得图像，例如：-

我尝试设置背景图像，但该图像将位于输入字段的开头而不是结尾，并且用户将能够覆盖背景图像？请问有什么建议吗？

谢谢

Answer 1

您可以向此输入添加一个类，例如.search，然后使用 CSS：

.search{
    background:url(path/to/search-icon.png) no-repeat right center;
    padding-right: size-of-your-icon-in-pixels;
}

此外，您可以在用户集中输入时删除搜索图标：

.search{
    background:url(path/to/search-icon.png) no-repeat right center;
}

.search:focus{
    background:none;
}