[分享]css3搜索框图片

CSS3提供了很多强大的功能，其中之一就是可以用来美化搜索框。我们可以利用CSS3的属性来制作出各种样式和图标，从而让搜索框看起来更加漂亮和实用。/ CSS代码 / .searchbox { widt...

CSS3提供了很多强大的功能，其中之一就是可以用来美化搜索框。我们可以利用CSS3的属性来制作出各种样式和图标，从而让搜索框看起来更加漂亮和实用。

/* CSS代码 */
.search-box {
  width: 300px;
  height: 30px;
  position: relative;
}

.search-box input[type="text"] {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  border: none;
  border-radius: 15px;
  padding-left: 30px;
  font-size: 16px;
  outline: none;
}

.search-box .search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.search-box .search-icon img {
  height: 20px;
  width: 20px;
}

.search-box:hover input[type="text"] {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
} 

上面的代码是一个简单的搜索框样式，其中用到了CSS3的border-radius属性来制作圆角，box-shadow属性来实现鼠标悬浮时的阴影效果，以及:hover伪类来实现鼠标悬浮时的样式变化。同时，我们还用position属性和transform属性来实现搜索图标的居中。

下面是一个更加复杂的搜索框样式，其中加入了背景图片和动画效果：

/* CSS代码 */
.search-box-2 {
  width: 400px;
  height: 30px;
  background: url(search-bg.png) no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.search-box-2 input[type="text"] {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  font-size: 16px;
  outline: none;
  text-indent: 50px;
  color: #ffffff;
  transition: all .4s ease-in-out;
}

.search-box-2 input[type="text"]:focus {
  width: 80%;
}

.search-box-2 .search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: all .3s ease-in-out;
}

.search-box-2 .search-icon img {
  height: 16px;
  width: 16px;
}

.search-box-2:hover .search-icon {
  left: -30px;
}

.search-box-2:hover input[type="text"] {
  text-indent: 30px;
} 

上面的代码中，我们引入了一个背景图片，并利用background-size属性将其自适应铺满整个搜索框。同时，我们给搜索框加入了动画效果，在用户焦点在搜索框上时改变其宽度，在用户鼠标悬浮在搜索框上时改变搜索图标的位置。

以上两种搜索框样式只是CSS3可以实现的众多样式中的一小部分，希望大家可以多多尝试，发掘CSS3的更多优秀特性。