CSS を使用して入力ボタンの画像を変更し、ブラウザの互換性の問題に対処するにはどうすればよいですか?

CSSで入力ボタンの画像を変更する

HTMLで画像付きの入力ボタンを作成する場合、「type=image」属性を使用しますソースURLも一緒に。ただし、「src」属性は CSS を通じて変更できないため、CSS でボタンをスタイル設定するのは困難になります。

非画像入力ボタンの CSS スタイル

スタイルを設定するにはCSS を使用した画像の外観を持つ入力ボタンの場合は、ボタンのタイプを「送信」に変更することを検討してください。これにより、画像ソースの要件がなくなりました。

<INPUT type="submit" class="myButton" value="" />

CSS ファイルで、次のように「myButton」クラスを定義します。

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

このアプローチにより、ホバー効果を適用できます。 「myButton:hover」クラスを定義します。

ブラウザ互換性

Safari は、どのボタンでも前述のスタイル設定方法をサポートしていないため、課題が生じています。 Safari をサポートするには、画像を配置し、フォームを送信する onclick 関数に JavaScript を使用することを検討してください。

以上がCSS を使用して入力ボタンの画像を変更し、ブラウザの互換性の問題に対処するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。