1 
<input type="submit"/>

<style>
input {
  background: url(tick.png) bottom left no-repeat;
  padding-left: 18px;
}
</style>

しかし、ベベルはなくなります。送信ボタンにアイコンを追加してベベルを維持するにはどうすればよいですか?
編集：ブラウザのデフォルトのように見せたい.

4

5 に答える 5

2

背景で <.input type="submit" /> を使用すると、使用しているブラウザー/OS によって異なるように見えます。

ブラウザのスタイルを維持したい場合は、タグ内に HTML を許可するボタン要素を使用できます。

<button type="submit"><img src="image.gif" /> Text</button>
or 
<button type="submit"><span class="icon"></span> Text</button>
于 2008-10-23T13:38:33.440 に答える
1

私の古いショップは、input type="image" 構文を揺るがしていました - それは送信として機能します。私のお気に入りのポーカー関係者の 1 人は、「食べ放題だよ、ベイビー!」とよく言います。- グラフィックとしてそこに置きたいもの。

于 2008-10-23T13:21:25.537 に答える
1

境界線スタイルのアウトプットを使用できます:

ボーダー: 2px アウトセット #cccccc;

于 2008-10-23T13:09:44.077 に答える
1

真のボタン効果を得るために、ホバーやフォーカス スタイルを導入するのも好きです。@Roburgが言及したのと同様に、私は通常次のようなことをします:

input#button {
    border: 2px outset rgb(0, 0, 0);
}

input#button:focus {
    border: 2px inset rgb(0, 0, 0);
}

これにより、実際のボタンではなくても、ボタンが押されたように見えます。

于 2008-10-23T13:14:14.787 に答える
0

ボーダーを使用します。例えば：

INPUT.button {
    BORDER-RIGHT: #999999 1px solid;
    BORDER-TOP: #999999 1px solid;
    FONT-SIZE: 11px;
    BACKGROUND: url(tick.png) bottom left no-repeat;
    BORDER-LEFT: #999999 1px solid;
    CURSOR: pointer;
    COLOR: #333333;
    BORDER-BOTTOM: #999999 1px solid
}

<input type="submit" class="button" />
于 2008-10-23T13:08:18.150 に答える