1

次のように検索入力を表示する次のコードがあります。

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

しかし、検索入力を次のようなイメージを持つように変更するにはどうすればよいですか:-

ここに画像の説明を入力

背景画像を設定しようとしましたが、この画像は入力フィールドの最後ではなく最初に表示され、ユーザーは背景画像を上書きできますか? アドバイスをお願いします。

ありがとう

4

1 に答える 1

2

のようにこの入力にクラスを追加し.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;
}
于 2013-11-11T13:09:46.570 に答える