如何在 Bootstrap 中使用图标设置搜索输入样式？-css教程-PHP中文网

如何在 Bootstrap 中使用图标设置搜索输入样式？

Mary-Kate Olsen

发布： 2024-11-12 13:41:01

原创

1020 人浏览过

How to Style Search Inputs With Icons in Bootstrap?

在 Bootstrap 中使用图标设计搜索输入

Bootstrap 4 已经取消了对字形的支持，但仍然有方法将图标合并到搜索输入中。以下是一些方法：

使用输入组：

Bootstrap 5：

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

登录后复制

Bootstrap 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中文网其他相关文章！