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

アイコン Bootstrap を使用した検索入力フィールド

Bootstrap 5 以降の現代では、アイコンを使用した検索入力フィールドのカスタマイズが簡単になりました。検索入力にアイコンを組み込むための 2 つの主要なアプローチについて詳しく見ていきましょう。

Bootstrap 5 ベータ版

Bootstrap 5 は、入力グループ クラスを提供し、これはシームレスに統合されます。入力フィールド。使用方法は次のとおりです。

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4 (元の回答)

Bootstrap 4 を使用している場合は、input-group クラスの使用を検討してください。同様に:

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

ブートストラップ 4 の追加オプション:

• ボーダー操作: border-right などのブートストラップ ユーティリティ クラスを使用します。 -0 または border-left-0 を使用して、フィールド内でアイコンが浮いているように見える入力を作成します。
• 入力グループ テキスト: 同じことを実現するには、背景が透明な input-group-text を使用します。効果。
• グリッド システム: 余白のないグリッド システム (行と列) を利用して、入力とアイコンの間にシームレスなトランジションを作成します。

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