如何在搜索输入中添加搜索图标

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;
}