css制作搜索

CSS 制作搜索框的方法

搜索框是网页常见的交互元素，通过CSS可以美化其外观并提升用户体验。以下是几种常见的实现方法：

基础样式

.search-box {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  font-size: 16px;
}

带图标样式

.search-container {
  position: relative;
  display: inline-block;
}

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

.search-input {
  padding-right: 30px;
}

动画效果

.search-box:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
  transition: all 0.3s ease;
}

响应式设计

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

完整HTML示例

<div class="search-container">
  <input type="text" class="search-box" placeholder="搜索...">
  <i class="search-icon">🔍</i>
</div>

这些方法可以根据实际需求组合使用，通过调整颜色、尺寸和动画效果来创建符合网站风格的搜索框。