如何更改提交按钮的外观？

Question

我的html代码中有这个简单的提交按钮外观

<input type="submit" name="pay now" value="pay" />

我希望提交按钮看起来像这样

<a href="#"><img src="images/shopping-cart/check-out-btn.png" border="0" /></a>

但应坚持其提交类型

怎么做？

Answer 1

你应该使用CSS：

input[type="submit"] {
    background: url(images/shopping-cart/check-out-btn.png);
    width: 200px; /* width of image */
    height: 50px; /* height of image */
    border: 0;
}

你应该使用更具体的选择器。

Answer 2

一个很好的方法是使用按钮元素。

<button type="submit"><img src="images/shopping-cart/check-out-btn.png" border="0" /></button>

它就像使用type = submit的常规输入一样，但你有更多的自由。

Answer 3

您可以通过将submit元素的type属性设置为input来将图片制作成image按钮：

<input type="image" src="/path/to/image.png"> 

有关详情，请参阅image Button State section of the HTML specification。