Input button with background png

Question

I am making a button input and attempting to give it a search icon rather than giving it a value="search" and the button saying "search" on it. Going for a different look but nothing is working. Below is HTML:

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

Then in CSS:

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

So far, no good results. Any help would be appreciated.

Possible duplicate of [How to add background image for input type="button"?](http://stackoverflow.com/questions/2738920/how-to-add-background-image-for-input-type-button) — Matt, Apr 03 '17 at 15:40
Works for me https://jsfiddle.net/j08691/xtcq7hsp/. Are you sure the path to your image is correct? Any errors in the console? — j08691, Apr 03 '17 at 15:44
If any of the answers were correct, please consider marking one as correct to close the question. Thanks — Derek, Apr 06 '17 at 15:09

score 2 · Answer 1 · answered Apr 03 '17 at 15:52

this css will put an image on your button

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

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

score 1 · Answer 2 · answered Apr 03 '17 at 15:55

Make sure that your image path is correct. But you also might have better results specifying width and height for your styles since you are removing width determining content.

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

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

score -1 · Answer 3 · answered Apr 03 '17 at 15:50

Here's an example using the button rather than input type=button, which allows the use of span tags within the button itself.

It does fall outside your params, as it's using the bootstrap CSS, but it works.

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

Input button with background png

3 Answers3