[分享]css3搜索框美化

在网页设计中，搜索框是一个非常重要的元素。一个好看而且有效的搜索框可以提高用户体验，并且让网站看起来更加专业。CSS3为我们提供了许多工具来美化搜索框，让它更加漂亮。/ 基本样式 / .search ...

在网页设计中，搜索框是一个非常重要的元素。一个好看而且有效的搜索框可以提高用户体验，并且让网站看起来更加专业。CSS3为我们提供了许多工具来美化搜索框，让它更加漂亮。

/* 基本样式 */
.search {
  position: relative;
  display: inline-block;
}

.search input[type="text"] {
  width: 200px;
  padding: 8px 12px;
  border: none;
  outline: none;
  font-size: 16px;
}

/* 美化 */
.search input[type="text"] {
  background-color: #fff;
  box-shadow: none;
  border-radius: 30px;
  border: 2px solid #ddd;
  transition: all .3s;
}

.search input[type="text"]:focus {
  border-color: #6699cc;
}

.search button[type="submit"] {
  background-color: #6699cc;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  outline: none;
  cursor: pointer;
  transition: all .3s;
}

.search button[type="submit"]:hover {
  background-color: #336699;
} 

上述代码中，我们首先对搜索框进行了基本的样式定义，让它具有基本的输入功能。接下来我们使用了一些CSS3特性，如border-radius、box-shadow、transition等让搜索框看起来更加漂亮。同时，我们对搜索按钮进行了一些样式定义，让它看起来更加凸显。最终的搜索框效果看起来类似下图：

当然，这只是搜索框的基础美化，如果需要更加炫酷的特效，可以参考其他CSS3教程进行自定义样式定义。但是我们需要注意，在设计搜索框时，一定要考虑到用户体验和搜索功能的快捷性。