当前位置：首页 > CSS

css制作搜索框

2026-01-08 19:05:17CSS

制作搜索框的基本结构

使用HTML创建一个简单的搜索框结构，包含输入框和搜索按钮：

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

基础样式设计

为搜索框添加基础CSS样式，包括边框、圆角和内边距：

.search-box {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  outline: none;
}

.search-box button {
  padding: 10px 15px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

悬停和焦点效果

添加交互效果，提升用户体验：

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

.search-box input:focus {
  background: #f9f9f9;
}

图标搜索框样式

使用字体图标代替文字按钮：

<div class="icon-search">
  <input type="text" placeholder="搜索...">
  <button><i class="fas fa-search"></i></button>
</div>

.icon-search {
  display: flex;
  width: 200px;
  border-bottom: 2px solid #4CAF50;
}

.icon-search input {
  flex: 1;
  padding: 8px;
  border: none;
  outline: none;
}

.icon-search button {
  background: none;
  border: none;
  color: #4CAF50;
  cursor: pointer;
}

动画搜索框效果

添加展开动画效果：

.animated-search {
  width: 50px;
  transition: width 0.3s ease;
}

.animated-search:hover,
.animated-search:focus-within {
  width: 200px;
}

响应式设计

使搜索框在不同屏幕尺寸下表现良好：

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

高级样式技巧

创建更美观的搜索框样式：

.glass-search {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 25px;
  padding: 5px 15px;
}

.glass-search input {
  background: transparent;
  color: white;
}

.glass-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

这些方法提供了从基础到高级的搜索框实现方案，可以根据具体需求选择或组合使用。

css制作搜索框