CSS：與輸入按鈕圖像實現CSS精靈

Question

此按鈕之前CSS精靈

<input type="image" src="/images/search-button.png" value="" id="search-button"> 

我試圖實現CSS精靈與我的搜索形式之一，問題是，如果我使用

<input id="search-button" class="sprites1" type="submit" value=""> 

它看起來像這樣。

正如你可以看到不看的權利右側的圖像，但它是可點擊的。

然後我試圖與

<span id="search-button" class="sprites1"></span> 

然後，它看起來正確！但！！我無法點擊它。

所以這裏是我的CSS精靈代碼。

我必須執行什麼才能讓它看起來是我想要的，我可以點擊它？

.sprites1 { 
     background: url('result.png'); 
    } 
#search-button {background-position: -0px -462px; 

       width:16px; height:16px; float:right; } 

Answer 1

這裏的問題是瀏覽器在元素上使用的默認CSS。你應該嘗試重置該CSS。我經常使用下面的代碼片段：

/* reset css of buttons */ 
.cssresetbutton { 
    border-width: 0px; 
    border-style: none; 
    background: inherit; 
    font: inherit; 
    color: blue; 
    padding: 0px; } 

.cssresetbutton:active { 
    border-width: 0px; 
    border-style: none; 
    background: inherit; 
    outline: 0; 
    box-shadow: none; } 

嘗試添加cssresetbutton類的輸入元素，看看它是否工作。

編輯： 您也可以嘗試不使用輸入[type = submit]元素。例如：

<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span> 

它會在單擊時提交form＃formid元素。