ホームページ > 記事 > ウェブフロントエンド > 虫眼鏡アイコンを使用したカスタムの「検索」ボタンを作成するにはどうすればよいですか?
カスタムの「検索」ボタンでテキスト入力フィールドを装飾する
特定の Web サイトで見られるものと同様の検索要素を作成するには、次の手順を実行します。これらの手順:
基本の作成構造:
<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>
<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 サイトの他の関連記事を参照してください。