当前位置：首页 > CSS

css 搜索框制作

2026-04-02 00:41:26CSS

基础搜索框样式

创建一个基础的搜索框需要设置输入框的样式和搜索按钮的样式。以下是一个简单的CSS示例：

.search-container {
  display: flex;
  width: 300px;
  margin: 20px auto;
}

.search-input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
  width: 100%;
  outline: none;
}

.search-button {
  padding: 10px 20px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

.search-button:hover {
  background-color: #3367d6;
}

带图标搜索框

可以在搜索框中添加放大镜图标，使其更直观：

css 搜索框制作

.search-container {
  position: relative;
  width: 300px;
}

.search-input {
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 16px;
  width: 100%;
  outline: none;
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

响应式搜索框

使搜索框在不同屏幕尺寸下自适应：

.search-container {
  max-width: 600px;
  margin: 20px auto;
  width: 90%;
}

.search-input {
  padding: 12px 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .search-container {
    width: 70%;
  }
}

动画效果搜索框

添加一些交互动画效果增强用户体验：

css 搜索框制作

.search-input {
  transition: all 0.3s ease;
  border: 2px solid #ddd;
}

.search-input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

.search-button {
  transition: background-color 0.3s ease;
}

暗黑模式搜索框

为支持暗黑模式的网站设计搜索框：

.search-input {
  background-color: #f8f9fa;
  color: #212529;
}

.dark-mode .search-input {
  background-color: #343a40;
  color: #f8f9fa;
  border-color: #495057;
}

.dark-mode .search-button {
  background-color: #6c757d;
}

.dark-mode .search-button:hover {
  background-color: #5a6268;
}

完整HTML示例

将CSS与HTML结合使用的完整示例：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <button class="search-button">搜索</button>
</div>

<!-- 或者带图标的版本 -->
<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <span class="search-icon">🔍</span>
</div>

这些CSS样式可以根据具体需求进行组合和调整，创建出符合网站风格的搜索框。

标签: css