当前位置：首页 > CSS

css制作搜索

2026-01-28 00:55:44CSS

搜索框的基本结构

使用HTML创建搜索框的基本结构，通常包含一个<form>元素和一个<input>标签。

<form class="search-form" action="/search" method="get">
  <input type="text" class="search-input" placeholder="搜索...">
  <button type="submit" class="search-button">搜索</button>
</form>

基础样式设计

通过CSS为搜索框添加基本样式，包括边框、圆角、背景色等。

.search-form {
  display: flex;
  max-width: 400px;
  margin: 20px auto;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

.search-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

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

响应式设计

确保搜索框在不同设备上都能正常显示，可以通过媒体查询调整宽度或布局。

@media (max-width: 600px) {
  .search-form {
    width: 90%;
  }
}

高级效果（可选）

为搜索框添加悬停效果、焦点样式或动画，提升用户体验。

.search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.search-input::placeholder {
  color: #999;
  transition: opacity 0.3s;
}

.search-input:focus::placeholder {
  opacity: 0.5;
}

图标集成

使用字体图标（如Font Awesome）或SVG图标替换默认按钮文本。

<button type="submit" class="search-button">
  <i class="fas fa-search"></i>
</button>

.search-button {
  padding: 10px;
  font-size: 16px;
}

暗色模式适配

通过CSS变量或媒体查询为搜索框添加暗色模式支持。

:root {
  --bg-color: #fff;
  --text-color: #333;
  --border-color: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --text-color: #eee;
    --border-color: #444;
  }
}

.search-input {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

css制作搜索