帶圖像的造型按鈕？

我一直在嘗試使用圖像來設置提交按鈕的樣式。我會使用CSS，但按鈕太複雜的設計明智。我曾嘗試將一個背景圖像添加到按鈕，但圖像定位不準確。我一直在使用帶圖像的造型按鈕？

<input type="image" src="myimage.png">

也試過，但很可惜，這不是一個提交按鈕，它不工作。我查看並嘗試了所有我認爲可能的事情，但無法找到解決方案來使按鈕提交表單。謝謝。

''實際上是一個提交按鈕，afaik – fcalderan 2012-04-26 08:33:12

您有一個提交按鈕不同的可能性：

<input type="image"> 
<input type="submit"> 
<button></button> <!-- no type needed, since submit is the default type -->

這些都是提交按鈕。挑一個最適合你的人。

現在，您可以選擇在按鈕之間放置圖像，或使用背景圖像並正確放置它們。

實施例用於與背景圖像按鈕：fiddle

2012-04-26 08:51:54 Christoph

嗯..我會四處遊戲，看看會發生什麼。謝謝。 – 2012-04-26 08:57:44

嘿，謝謝你是對的。之前嘗試過，但因爲我也使用PHP服務器有問題，我找不到。謝謝。 – 2012-04-26 08:59:48

@DraganMarjanovic看看正確對齊的background.image：http://jsfiddle.net/wRtpR/。很高興我能幫上忙;） – Christoph 2012-04-26 09:00:27

如果<input type="image">不按預期只是嘗試，而不是

<button type="submit"><img src="myimage.png"></button>

但我寫的代碼上面的註釋應該工作也沒關係

2012-04-26 08:34:40 fcalderan

謝謝，我會給它一個。 – 2012-04-26 08:52:15

嗯我試過這個，但圖像沒有對齊和關閉...圖像只看起來是正確的當作爲 '' 但它沒有提交功能。 – 2012-04-26 08:55:27

一定要覆蓋所有特定的按鈕樣式，如邊距，邊框和填充，並請張貼小提示，以準確顯示樣式的錯誤 – fcalderan 2012-04-26 08:57:24

使用按鈕元素和風格它的CSS。不要忽略文字，你的表格應該是accessible沒有圖片或CSS。

<button type='submit'>Informative submit text</button> 

button { 
    background-image:url('myimage.png'); 
}

2012-04-26 08:40:37

我試過這個按鈕，我的圖片總是看起來沒有對齊，是的，我的所有邊距都設置爲0. – 2012-04-26 08:52:06

<input type="image" src="myimage.png">

或

<input type="submit" style="background:url(myimage.png)">

2012-04-26 08:53:08 Enve

如果有人需要一個較新的HTML5好的答案：

<button id='' name='' value='' ><img src='img.jpg' /></button>

2016-11-17 23:50:06 Sol

回答