css 搜索按钮文字 图片不显示

CSS中的搜索按钮是我们经常用到的一项元素，但是在使用过程中，有时候会出现按钮文字或者图片不显示的情况，这是什么原因呢？下面就让我们一起来了解一下。

一、搜索按钮文字不显示

button {
  background-color: #5cb85c;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  font-size: 16px;
}

在代码中，我们设置了按钮的颜色、字体大小等属性，但是有时候，按钮文字却不显示了。这是因为我们没有为按钮设置文字的颜色。解决方法很简单，只需要再加一个color属性即可。

button {
  background-color: #5cb85c;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  font-size: 16px;
  /*添加文字颜色属性*/
  color: #000;
}

二、搜索按钮图片不显示

button {
  background-image: url("search-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  width: 40px;
  height: 40px;
}

在代码中，我们设置了搜索按钮的背景图片，并且设置了宽度和高度，但是有时候，图片没有显示出来。这是因为图片路径不正确或者图片本身出现了问题。解决方法也很简单，首先确认图片路径是否正确，然后再确认图片是否存在问题。

综上所述，当出现CSS搜索按钮文字或者图片不显示的问题时，我们只需要找到问题所在，并且进行修正即可，非常简单。