テキスト入力フィールド内に検索ボタンを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-01 08:03:02

オリジナル

933 人が閲覧しました

How to Create a Search Button Inside a Text Input Field?

テキスト入力フィールドに検索ボタンを実装する方法

多くの Web サイトで見られる検索要素を模倣するには、テキストを組み合わせることができます。 Span タグを含む入力フィールド。

検索ボタンの追加

検索ボタンを Span タグ内にラップします:

<code class="html"><span id="g-search-button"><img src="magnifying-glass.png" alt="Search"></span></code>

ログイン後にコピー

ボタンのスタイル設定

ボタンをテキスト入力の左側に配置するには、カスタムスタイルを適用します:

<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 image URL */
}</code>

ログイン後にコピー

虫眼鏡画像の取得

IconFinder や The Noun Project などの Web サイトで無料の虫眼鏡画像を見つけることができます。

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