[分享]css做好看的搜索框

在网页设计中，搜索框是非常重要的一个元素。它可以帮助用户快速查找需要的信息，提高用户体验。但是，在设计搜索框时，我们不仅要考虑到功能性，还要考虑到美观性。下面我介绍几个CSS属性，帮助你设计一个好看的...

在网页设计中，搜索框是非常重要的一个元素。它可以帮助用户快速查找需要的信息，提高用户体验。但是，在设计搜索框时，我们不仅要考虑到功能性，还要考虑到美观性。下面我介绍几个CSS属性，帮助你设计一个好看的搜索框。

/* 输入框样式 */
input[type="text"] {
  padding: 10px;
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 添加圆角 */
  background-color: #f2f2f2; /* 设置背景颜色 */
  font-size: 16px;
  width: 300px;
}

/* 搜索图标样式 */
input[type="submit"] {
  background-color: #4CAF50; /* 设置背景颜色 */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px; /* 添加圆角 */
  margin-left: -4px; /* 调整位置 */
}

/* 将搜索框和搜索图标放在一个容器中 */
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 让搜索框和搜索图标在同一行 */
.search-box input[type="text"] {
  border-radius: 5px 0 0 5px; /* 添加圆角 */
}

.search-box input[type="submit"] {
  border-radius: 0 5px 5px 0; /* 添加圆角 */
} 

上面的代码是一个简单的搜索框样式。我们给输入框和搜索图标分别添加了样式。并且使用了容器和 flex 布局将它们放在一起，并且让它们在同一行显示。在样式中，我们使用了圆角的效果，使我们的搜索框更加美观。

在设计搜索框时，我们还可以尝试添加阴影效果、渐变效果、动画效果等等来增强美观性。但无论怎样，我们一定要保证搜索框的实用性，方便用户进行搜索。希望以上内容对您有所帮助。