CSS 带图标的搜索输入框 Bootstrap

在本文中，我们将介绍如何使用CSS和Bootstrap创建带有图标的搜索输入框。

阅读更多：CSS 教程

准备工作

在开始之前，我们需要确保已经引入了Bootstrap的CSS文件。可以通过以下代码片段来引入Bootstrap：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

同时，我们需要一个搜索图标。我们可以使用FontAwesome提供的图标库。可以通过以下代码片段来引入FontAwesome的CSS文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

创建搜索输入框

我们首先需要创建一个基本的搜索输入框，并添加Bootstrap的样式。使用以下HTML代码：

<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

上述代码使用了Bootstrap的input-group类来将输入框和按钮包裹在一起。输入框的样式使用了form-control类，按钮的样式使用了btn和btn-primary类。搜索图标使用了FontAwesome提供的fa-search类。

自定义样式

如果想要对搜索输入框的样式进行自定义，可以参考下面的示例代码：

<style>
  .custom-input {
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
  }

  .custom-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
  }

  .custom-button:hover {
    background-color: #0069d9;
  }
</style>

<div class="input-group">
  <input type="text" class="custom-input" placeholder="搜索">
  <div class="input-group-append">
    <button class="custom-button" type="button">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

上述代码定义了.custom-input类和.custom-button类来自定义输入框和按钮的样式。可以根据需求修改边框颜色、背景色、文本颜色等样式。

搜素事件

如果需要在用户输入完成后触发搜索事件，可以使用JavaScript来监听输入框的keyup事件。以下是一个示例：

<div class="input-group">
  <input id="search-input" type="text" class="form-control" placeholder="搜索">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" onclick="search()">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

<script>
  function search() {
    var inputValue = document.getElementById("search-input").value;
    alert("搜索内容：" + inputValue);
    // 进行搜索操作
  }
</script>

上述代码通过给搜索按钮的onclick事件绑定了一个search函数，该函数获取输入框的值并进行搜索操作。可以根据需要更改搜索操作的实现。