Bootstrap でアイコンを使用して検索入力をスタイル設定する方法-CSSチュートリアル-php.cn

Bootstrap でアイコンを使用して検索入力をスタイル設定する方法

Mary-Kate Olsen

リリース： 2024-11-12 13:41:01

オリジナル

1019 人が閲覧しました

How to Style Search Inputs With Icons in Bootstrap?

Bootstrap のアイコンを使用した検索入力のスタイリング

Bootstrap 4 ではグリフィコンのサポートが廃止されましたが、検索入力にアイコンを組み込む方法はまだあります。以下にいくつかのアプローチを示します。

入力グループの使用:

ブートストラップ 5:

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

ログイン後にコピー

ブートストラップ4:

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

ログイン後にコピー

入力内のアイコンの配置:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

ログイン後にコピー

なしで入力グループテキストを使用する背景:

<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="...">

ログイン後にコピー

以上がBootstrap でアイコンを使用して検索入力をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。