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

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

特定の 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 の背景を使用して割り当てます。 -image プロパティ:

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

これは画像を少し左に寄せて、検索ボックスの右端に重ねます。

カスタマイズ:

#g の値を調整してボタンの外観を変更します。 -search-button 背景色、サイズ、位置を含む CSS ブロック。

動作例:

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

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

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