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

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

提供されたスクリーンショットに示されている検索要素を実現するには、両方のテキスト入力が必要です

テキスト入力フィールドは、次のコードを使用して作成できます。

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

虫眼鏡画像の場合、background-image プロパティを使用してオーバーレイできます。それはspan要素内にあります。さらに、相対位置を使用して、画像を検索ボックスの右端に揃えることができます。

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

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

CSS コードでは、幅と高さによって画像のサイズが決まり、左と上は画像のサイズを決定します。プロパティは、検索ボックスを基準にして配置します。背景色のプロパティは、希望する虫眼鏡画像の URL に置き換えることができます。

ここでは、JSBin での実際の例を示します: [JSBin の例へのリンク]

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