带背景的输入按钮 png答案

【问题标题】：Input button with background png带背景的输入按钮 png
【发布时间】：2017-04-03 15:39:53
【问题描述】：

我正在做一个按钮输入并尝试给它一个搜索图标，而不是给它一个 value="search" 和按钮说“搜索”。寻找不同的外观，但没有任何效果。以下是 HTML：

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

然后在 CSS 中：

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

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

【问题讨论】：

How to add background image for input type="button"?的可能重复
为我工作jsfiddle.net/j08691/xtcq7hsp。您确定图像的路径正确吗？控制台有错误吗？
如果有任何答案是正确的，请考虑将其中一个标记为正确以结束问题。谢谢

标签： javascript html css

【解决方案1】：

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

.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;
}

&lt;input class="searchButton" type="button"&gt;

【讨论】：

【解决方案2】：

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

https://jsfiddle.net/7rsurdav/

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

.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;
}

&lt;button class="searchButton"&gt;&lt;/button&gt;

【讨论】：

【解决方案3】：

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

它确实不在您的参数范围内，因为它使用引导 CSS，但它可以工作。

<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>

【讨论】：