1. ホーム
  2. css

[解決済み] CSSで入力ボタンの画像を変更する方法

2022-03-07 23:15:29

質問

ということで、画像付きの入力ボタンは

<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を使って行う方法の例をウェブで見つけましたが、私はCSSの解決策を探しています。

私はFirefox 3.0.3を使用しています。

解決方法は?

type="image"はSRCを必要とし、CSSで設定することはできません。

なお、Safariでは、あなたが探しているような方法でボタンをスタイルすることはできません。Safariのサポートが必要な場合は、画像を配置し、フォームを送信するonclick関数を用意する必要があります。