单位信息查询的搜索框

创建一个响应式且美观的单位信息查询搜索框，我们可以按照以下步骤进行：

1. **HTML基础结构**[^1]:

<!-- 基础HTML搜索框结构 -->
<form id="search-form">
  <input type="text" class="search-input" placeholder="请输入单位信息...">
  <button type="submit" class="search-button">搜索</button>
</form>

2. **CSS样式**[^2]，包括媒体查询和自适应设计:

.search-input {
  border: none;
  background-color: #f1f1f1;
  border-radius: 5px; /* 使用圆角美化输入框 */
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) { /* 对小屏幕设备调整 */
  .search-input {
    width: 80%;
  }
}

.search-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #45a049;
}

3. **JavaScript事件监听**（可选，用于增强用户体验）:

document.getElementById('search-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  // 在这里添加实际的搜索逻辑
});