提交按鈕圖像

我想使用提交按鈕圖像而不是標準按鈕。我在Google和SO上搜索並獲得了幾種不同的方法。提交按鈕圖像

哪個是使用圖像作爲提交按鈕的正確方法？

此外，我希望添加三種狀態的按鈕 - 正常，懸停的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; 
}

什麼節目up

enter image description here

它應該顯示

enter image description here

來源

2012-08-02 Harsha M V

在''中刪除'text-indent'並添加'value ='訂閱''或在圖像上添加字母'Subscribe' – asprin 2012-08-02 06:56:18

@Harsha M V：請參閱下面的答案。 – 2012-08-02 07:06:52

編輯：

我認爲你正在嘗試做的是在這個DEMO

做有一個按鈕的三種狀態：正常，懸停和活動

您需要使用CSS Image Sprites作爲按鈕狀態。

See The Mystery of CSS Sprites

/*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-02 07:05:40

謝謝.... :) – 2012-08-02 09:35:31

不客氣 – 2012-08-02 09:42:47

與sprites我通常遠離背景'速記，以儘量減少重複。在其他州使用'.imgClass'和'background-position'上的'background-image' – 2013-01-17 16:24:47

<input type="image" src="path to image" name="submit" />

UPDATE：

對於按鈕狀態，你可以使用類型= 「提交」，然後添加一個類它

<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-02 06:44:34 asprin

正在添加名稱=提交密鑰？ – 2012-08-02 06:46:00

沒有關鍵是添加類型=「圖像」 – Ibu 2012-08-02 06:47:49

如果我想添加按鈕狀態？ – 2012-08-02 06:48:48

你要刪除邊框和輸入添加背景圖片。

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

現在應該是好的，通常情況下。

來源

2012-08-02 09:34:05 phndiaye

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
凡標準提交按鈕有TYPE="submit"，我們現在有TYPE="image"。圖像類型默認爲表單提交按鈕。更簡單

來源

2013-03-16 03:57:19 Ibnu

對於可訪問性原因，即使您隱藏此文本，您始終指定提交的值，或者如果您使用<input type="image" .../>始終爲此輸入字段指定alt=""屬性，這一點非常重要。

盲人不知道按鈕會做什麼，如果它不包含有意義的alt=""或value=""。

來源

2013-03-19 12:25:15

提交按鈕圖像

回答

相關問題