バックグラウンドpngの入力ボタン

Question

ボタン入力を行い、value = "search"とボタンに "search"というより、検索アイコンを表示しようとしています。別の見に行くが、何も動作していない。

その後

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

CSSで：

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

これまでのところ、良い結果下記のHTMLです。どんな助けもありがとう。

Answer 1

入力タイプ=ボタンではなく、ボタンを使用した例です。これは、ボタン自体でスパンタグを使用できるようにします。

ブートストラップ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>

Answer 2

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

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

Answer 3

を画像を配置します。しかし、幅を決定するコンテンツを削除しているので、スタイルの幅と高さを指定する方が良い結果が得られるかもしれません。

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>