CSS：入力ボタン画像

Question

と実装CSSスプライトこのボタンは、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をリセットしようとする必要があります。私は、多くの場合、次のコードを使用：あなたのinput要素にcssresetbuttonクラスを追加

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

試して、それが動作するかどうかを確認します。

編集： input [type = submit]要素を使用しないこともできます。例：

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

クリックすると、＃formid要素のフォームが送信されます。