ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrap 4 および 5 の検索入力にアイコンを追加するにはどうすればよいですか?
アイコン ブートストラップによる検索入力
ブートストラップはバージョン 4 でグリフィコンをサポートしなくなったため、検索入力にアイコンを追加しようとするユーザーは代替手段を見つける必要がありますメソッド。
ブートストラップ 5 ベータ版(2021 年更新)
<div class="input-group"> <input class="form-control border-end-0 border rounded-pill" type="text" value="search">
Bootstrap 4 (元のソリューション)
Bootstrap 4 入力グループ要素の使用:
<div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search">
内部入力border:
<div class="input-group col-md-4"> <input class="form-control py-2 border-right-0 border" type="search" value="search">
背景なしの入力グループテキスト:
<div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" value="search">
余白なしのグリッド (行>列)間隔:
<div class="row no-gutters"> <div class="col"> <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">
先頭に追加アイコン:
<div class="input-group"> <span class="input-group-prepend"> <div class="input-group-text bg-transparent border-right-0"> <i class="fa fa-search"></i> </div> </span> <input class="form-control py-2 border-left-0 border" type="search" value="...">
検証アイコン:
<div class="input-group is-invalid"> <input class="form-control" type="search" value="">
以上がBootstrap 4 および 5 の検索入力にアイコンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。