ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップの検索入力にアイコンを追加するにはどうすればよいですか?

ブートストラップの検索入力にアイコンを追加するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-16 12:27:03303ブラウズ

How to Add an Icon to a Search Input in Bootstrap?

Bootstrap を使用したアイコンでの入力の検索

Bootstrap 4 では、アイコンにグリフィコンを使用できなくなりました。代わりに、アイコンを背景として設定するか、カスタムの位置で Font Awesome アイコンを使用することができます。

背景画像:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

ただし、この方法では、常に確実に動作するとは限りません。

カスタムの Font Awesome Icon配置:

.input-group {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

Bootstrap 5:

Bootstrap 5 では、入力グループ コンポーネントを使用して、検索入力にアイコンを簡単に追加できます。 .

<div>

代替アプローチ:

  • 境界線を使用した入力グループ ユーティリティ: 境界線クラスを使用して、入力とアイコンの周囲に境界線を作成します。
<div>
  • 入力グループとテキスト:
<div>

以上がブートストラップの検索入力にアイコンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。