虫眼鏡アイコンを使用したカスタムの「検索」ボタンを作成するにはどうすればよいですか?

カスタムの「検索」ボタンでテキスト入力フィールドを装飾する

特定の Web サイトで見られるものと同様の検索要素を作成するには、次の手順を実行します。これらの手順:

基本の作成構造:

1. テキスト入力フィールドのコード化:

<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>

2. を含めます。虫眼鏡画像を保持するタグ:

<code class="html"><span id="g-search-button"></span></code>

虫眼鏡画像の追加:

虫眼鏡画像を組み込むには、CSS の背景を使用して割り当てます。 -画像プロパティ:

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

配置とスタイル:

テキスト入力フィールド内に画像を配置するには:

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

これにより、画像が配置されます少し左に、検索の右端と重なっていますbox.

カスタマイズ:

#g-search-button CSS ブロックの値 (背景色、サイズ、

の例アクション:

検索要素の完全に機能する実装を確認するには、次の JSBin の例を参照してください:

[JSBin Demo](https://jsbin.com/xahepu/edit) ?html,css,output)

以上が虫眼鏡アイコンを使用したカスタムの「検索」ボタンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。