ホームページ > 記事 > ウェブフロントエンド > 虫眼鏡アイコンを使用したカスタムの「検索」ボタンを作成するにはどうすればよいですか?
カスタムの「検索」ボタンでテキスト入力フィールドを装飾する
特定の 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 の背景を使用して割り当てます。 -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 サイトの他の関連記事を参照してください。