輸入按鈕與背景PNG

-1

我正在做一個按鈕輸入，並試圖給它一個搜索圖標，而不是給它一個值=「搜索」和按鈕說「搜索」就可以了。去一個不同的外觀，但沒有任何工作。下面是HTML：輸入按鈕與背景PNG

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

然後在CSS：

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

到目前爲止，還沒有很好的效果。任何幫助，將不勝感激。

來源

2017-04-03 A.McC

的可能的複製[如何添加背景圖像輸入類型= 「鍵」？]（http://stackoverflow.com/questions/2738920/how- to-add-background-image-for-input-type-button） – mkaatman

適用於我https://jsfiddle.net/j08691/xtcq7hsp/。你確定圖片的路徑是正確的嗎？控制檯中有任何錯誤？ – j08691

如果有任何答案是正確的，請考慮標記爲正確的以解決問題。謝謝 – Derek

-1

下面是使用按鈕而不是輸入類型=按鈕的示例，該按鈕允許在按鈕本身內使用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>

來源

2017-04-03 15:50:56 Snowmonkey

這個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">

來源

2017-04-03 15:52:39 Derek

請確保您的圖片路徑是正確的。但是，由於要刪除決定寬度的內容，因此您也可以爲樣式指定寬度和高度，以獲得更好的結果。

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>

來源

2017-04-03 15:55:08 dgeare

輸入按鈕與背景PNG

回答

相關問題