搜索条件折叠html,基于html css实现带搜索图标的搜索框功能

好的，以下是基于 HTML 和 CSS 实现带搜索图标的搜索框功能的代码示例：

<div class="search-box">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

.search-box {
  position: relative;
  display: inline-block;
}

.search-box input[type="text"] {
  width: 200px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.search-box button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.search-box button[type="submit"] i {
  color: #ccc;
  font-size: 20px;
}

.search-box button[type="submit"]:hover i {
  color: #333;
}

解释一下代码：

- `<div class="search-box">` 用来包裹搜索框和搜索按钮。
- `<input type="text" placeholder="Search...">` 是搜索框，`placeholder` 属性用来设置默认提示文字。
- `<button type="submit"><i class="fa fa-search"></i></button>` 是搜索按钮，使用了 Font Awesome 图标库的搜索图标。
- `.search-box` 的 `position: relative;` 用来设置相对定位，使得搜索按钮可以使用绝对定位。
- `.search-box input[type="text"]` 和 `.search-box button[type="submit"]` 分别用来设置搜索框和搜索按钮的样式。
- `.search-box button[type="submit"] i` 用来设置搜索图标的样式，`.fa-search` 类是 Font Awesome 图标库中的搜索图标类。

希望能对你有所帮助！