CSSを使用して入力ボタンの画像を変更する方法 質問する

CSSを使用して入力ボタンの画像を変更する方法 質問する

そこで、画像付きの入力ボタンを作成することができます。

<INPUT type="image" src="/images/Btn.PNG" value="">

しかし、CSSを使って同じ動作を実現することはできません。例えば、私は

<INPUT type="image" class="myButton" value="">

ここで、「myButton」はCSSファイルで次のように定義されています。

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

それがすべてであれば、元のスタイルを使用できますが、ホバー時のボタンの外観を変更したいと思います (クラスを使用myButton:hover)。リンクが適切であることはわかっています。ページの他の部分の背景画像としてリンクを読み込むことができたからです (チェックとして)。JavaScript を使用してこれを行う方法の例を Web で見つけましたが、CSS ソリューションを探しています。

違いがあるかどうかはわかりませんが、私は Firefox 3.0.3 を使用しています。

ベストアンサー1

CSS を使用してボタンのスタイルを設定する場合は、type="image" ではなく type="submit" ボタンにします。type="image" は SRC を必要としますが、これは CSS では設定できません。

Safari では、希望どおりにボタンのスタイルを設定できないことに注意してください。Safari のサポートが必要な場合は、画像を配置し、フォームを送信する onclick 関数を用意する必要があります。

おすすめ記事