当前位置：首页 > CSS

css制作网页搜索

2026-04-02 17:37:17CSS

CSS 制作网页搜索框

使用 CSS 制作网页搜索框可以通过样式化输入框和按钮来实现。以下是一个简单的方法：

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

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

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

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

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

添加搜索图标

可以使用 Font Awesome 或其他图标库为搜索框添加图标：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

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

响应式搜索框

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

.search-container {
  max-width: 500px;
  width: 90%;
}

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

动画效果搜索框

添加简单的悬停和聚焦动画：

.search-input {
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

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

高级搜索框样式

创建更现代的半透明搜索框：

css制作网页搜索

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

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

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

.search-button {
  background: transparent;
  color: white;
}

这些方法可以根据需要组合使用，创建出各种风格的网页搜索框。