web-dev-qa-db-ja.com

送信ボタンで背景画像を設定する方法は？

送信ボタンで背景画像を設定する方法は？

通常の送信ボタンの代わりに画像を使用する必要がありますか？どの方法がxhtml/cssに最適でしょうか？

IE6、IE7を含むすべてのメインブラウザでボタンは同じように見えるはずです

cssxhtml
22
Jitendra Vyas

私が通常行う方法は、次のcssを使用することです。

div#submitForm input {
  background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;
  color: #000000;
  cursor: pointer;
  font-weight: bold;
  height: 20px;
  padding-bottom: 2px;
  width: 75px;
}

そしてマークアップ：

<div id="submitForm">
    <input type="submit" value="Submit" name="submit">
</div>

さまざまなブラウザで状況が異なる場合は、すべてのマージン、パディング、場合によってはボーダーをゼロに設定するリセットスタイルシートを使用することをお勧めします。

34
Phaze Phusion

通常、1つ（または複数）の画像タグを使用します。CSSでdiv背景画像を設定して送信ボタンとして機能させることもできます。実際の送信は、クリックイベントでjavascriptで実行されます。

A チュートリアル 件名。

5
Donald Byrd
.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}
5
muruga

このカバーボタンと中央の画像のように

<button><img src="foldername/imagename" width="30px" height= "30px"></button>
1
Areej Qasrawi

次のコードを試すことができます：

background-image:url('url of your image') 10px 10px no-repeat
0
user4546837