19

標準のボタンの代わりに、送信ボタンの画像を使用したいと考えています。Google と SO で検索したところ、いくつかの方法が見つかりました。

画像を送信ボタンとして使用する正しい方法はどれですか?

また、ボタンに3つの状態を追加したいと思います-通常、ホバー、オンクリック

私が試したこと

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

何が現れるか

ここに画像の説明を入力

何を表示するか

ここに画像の説明を入力

4

5 に答える 5

28

編集:

このDEMOでやろうとしていると思います

ボタンには、通常、ホバー、アクティブの 3 つの状態があります。

ボタンの状態にはCSS イメージ スプライトを使用する必要があります。

CSS スプライトの謎を見る 

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />

于 2012-08-02T07:05:40.620 に答える
11 
<input type="image" src="path to image" name="submit" />

アップデート：

ボタンの状態については、type="submit" を使用してからクラスを追加できます

<input type="submit" name="submit" class="states" />

次にCSSで、背景画像を次の目的で使用します。

.states{
background-image:url(path to url);
height:...;
width:...;
}

.states:hover{
background-position:...;
}

.states:active{
background-position:...;
}
于 2012-08-02T06:44:34.603 に答える
4

アクセシビリティ上の理由から、このテキストを非表示にしている場合や、この入力フィールド<input type="image" .../>に常に属性を指定している場合でも、送信の値を常に指定することが非常に重要です。alt=""

alt=""目の不自由な人は、意味のあるやが含まれていない場合、ボタンが何をするかわかりませんvalue=""。

于 2013-03-19T12:25:15.400 に答える
3

境界線を削除し、入力に背景画像を追加する必要があります。

.imgClass { 
    background-image: url(path to image) no-repeat;
    width: 186px;
    height: 53px;
    border: none;
}

今は普通にいいはずです。

于 2012-08-02T09:34:05.893 に答える