[分享]css3搜索框前面加图片

CSS3可以为搜索框添加图片，使搜索框更具吸引力和个性化。

.search-box {
  background-image: url('search-icon.png'); /* 添加背景图片 */
  background-position: left center; /* 图片位置 */
  background-repeat: no-repeat; /* 不重复 */
  padding-left: 30px; /* 加大搜索框左侧padding，以便显示图片 */
}

以上是CSS代码，我们可以使用一个名为“search-icon.png”的图片作为搜索框前面的图标。使用background-image属性将图片设置为搜索框的背景，通过background-position属性将图片设置在左侧中间位置，然后使用padding-left属性增加左侧填充的宽度，从而腾出足够的空间。

这样，我们就可以实现带有图片的搜索框的效果。

总之，使用CSS3可以非常轻松地对搜索框进行个性化定制。通过添加图片，可以让搜索框更加美观和有吸引力，让用户感到愉悦和愉快。