1

このボタンはCSSスプライトの前にあります

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

検索フォームの1つで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; }
4

1 に答える 1

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クラスを入力要素に追加して、機能するかどうかを確認してください。

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

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

クリックするとform＃formid要素を送信します。

于 2012-05-01T21:47:36.930 に答える