如何制作带关联搜索按钮的常驻式悬浮搜索栏

直接用HTML+CSS就能实现你要的效果，代码示例如下：

HTML 结构 #

<div class="search-container">
  <input type="text" class="search-input" placeholder="输入搜索内容...">
  <button class="search-btn">搜索</button>
</div>

CSS 样式 #

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-btn:hover {
  background-color: #0056b3;
}

这段代码会生成一个始终可见的搜索栏，输入框和搜索按钮并排显示，和你提供的示例效果一致。你可以根据需求调整颜色、间距、圆角等样式参数。

内容的提问来源于stack exchange，提问作者ge widydr