web-dev-qa-db-ja.com

送信ボタンの画像

標準のボタンの代わりに送信ボタン画像を使用したい。 Googleで検索して、SOといくつかの異なる方法を得た。

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

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

私が試したもの

HTML

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

CSS

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

表示されるもの

enter image description here

表示するもの

enter image description here

htmlcsssubmit
19
Harsha M V

編集済み：

このようにしてやろうとしていると思います [〜＃〜] demo [〜＃〜]

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

ボタンの状態には CSS Image Sprites を使用する必要があります。

「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" />
28
Ahsan Khurshid
<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:...;
}
11
asprin

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
標準の送信ボタンにはTYPE="submit"、現在TYPE="image"。デフォルトでは、画像タイプはフォーム送信ボタンです。よりシンプル

8
Ibnu

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

視覚障害者は、意味のあるalt=""またはvalue=""。

4
Pawel Wilga

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

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

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

3
phndiaye