テキスト入力フィールド内に「検索」ボタンを作成するにはどうすればよいですか?

テキスト入力フィールドに「検索」ボタンを作成する

特定の Web サイトのソース コードを表示すると、「検索」ボタンが表示される場合があります。 " テキスト ボックスとそれに続く「虫眼鏡」ボタンで構成される要素。この記事では、Web アプリケーションで同様の要素を作成するプロセスについて説明します。

「虫眼鏡」画像の取得

「虫眼鏡」を作成するには画像には、SVG アイコンまたは小さな PNG 画像を使用できます。オンラインでは、無料または商用のアイコンを見つけることができるリソースが多数あります。

ボタンの実装

画像を取得したら、テキスト入力に組み込むことができます。 CSSを使用したフィールド。以下に例を示します。

<code class="CSS">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}</code>

この CSS コードでは次のようになります。

• display: inline-block;要素をテキストのある行に配置できます。
• 幅と高さはボタンの寸法を指定します。
• 位置: 相対;ボタンの位置を手動で調整できます。
• 左と上で検索ボックスの右端と重なる位置にボタンを移動します。
• 背景色を実際の色に置き換えることができますimage.

作業例

次の JSBin はコードの実際の例を提供します: https://jsbin.com/vehobew/edit?html, css、出力

以上がテキスト入力フィールド内に「検索」ボタンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。