Question

我正在进行按钮输入并试图给它一个搜索图标，而不是给它一个值=“搜索”和按钮说“搜索”。寻找不同的外观，但没有任何工作。以下是HTML：

<input class="searchButton" type="button">

然后在CSS中：

.searchButton{
background-image: url('search.png');
outline: none;
background-size: cover;
}

到目前为止，没有好结果。任何帮助，将不胜感激。

Answer 1

这个css会在你的按钮上放一个图像

＆＃13;

.searchButton{
  width: 30px;
  height: 30px;
  background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

＆＃13;

<input class="searchButton" type="button">

＆＃13;

Answer 2

确保您的图片路径正确无误。但是，由于您要删除宽度确定内容，因此您还可能有更好的结果指定样式的宽度和高度。

https://jsfiddle.net/7rsurdav/

＆＃13;

document.querySelector('.searchButton').addEventListener('click',function(e){alert('clicked');});

＆＃13;

.searchButton{
  background-color:transparent;
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
outline: none;
background-size: cover;
width:20px;
height:20px;
border:0px;
border-radius:1px;
}

＆＃13;

<button class="searchButton"></button>

＆＃13;

Answer 3

这是一个使用按钮而不是输入type =按钮的示例，它允许在按钮内使用span标签。

它确实不属于你的params，因为它使用了bootstrap CSS，但它确实有效。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <button class="searchButton"><span class="glyphicon glyphicon-search"> Search</button>

＆＃13;

输入按钮与背景png

3 个答案: