ユーザー インターフェイスの機能を強化するためにテキスト フィールドに検索ボタンを追加するにはどうすればよいですか?

検索ボタンによるテキストフィールドの強化

洗練された直感的なユーザーインターフェイスの作成を追求し、テキストに検索ボタンを追加します。入力フィールドを使用すると、その機能を大幅に強化できます。これを実現するには、次の手順に従います。

検索要素の作成

検索要素を作成するには、入力テキスト フィールドとスパン要素の組み合わせを利用できます。 。テキスト入力は主な検索フィールドとして機能し、span 要素には虫眼鏡画像が格納されます。

虫眼鏡画像の取得

さまざまなソースがあります。適切な虫眼鏡画像が見つかります。 IconFinder や The Noun Project などの無料の画像リソースの使用を検討してください。取得したら、background-image プロパティを使用して、span 要素に画像を配置します。

検索ボタンの配置

検索ボタンをテキスト入力フィールドに揃えるには、相対配置を使用してスパン要素を配置します。左と上のプロパティを調整してボタンを目的の位置に移動し、ボタンがテキスト フィールドの右端に重なるようにします。

実装例

実装例は次のとおりです。 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>

このコードは、検索ボタンをブロック要素として定義し、その寸法を設定し、テキスト入力に対する相対的な位置を調整します。背景色プロパティを変更すると、黒い四角形を虫眼鏡の画像に置き換えることができます。

実際の例については、元の応答で提供されている JSBin リンクを参照してください。

以上がユーザー インターフェイスの機能を強化するためにテキスト フィールドに検索ボタンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。