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

Question

我在HTML代码中有一个简单的提交按钮外观。

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

我希望将提交按钮的外观设计成这样。

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

但应该保持其提交类型

如何做到这一点？

- sasori

---

有用的链接：http://www.tyssendesign.com.au/articles/css/styling-form-buttons/ - xkeshav

通过 <input type="image" src="blah blah blah"> 解决了这个问题。 - sasori

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;
}

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

- Joseph Silber

---

通过 CSS 自定义提交按钮并不是一个好的选择，因为它不跨浏览器。 - Gaurav Shah

您使用的是不支持 CSS 的浏览器吗？ - Cody Gray

我并不是说浏览器不支持CSS..我的意思是，假设你有一个禁用的按钮，尝试在IE、Chrome和Safari中进行自定义，看看它们之间的差异。 - Gaurav Shah

Answer 2

使用按钮元素可以很好地实现这一点。

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

它的工作方式与type=submit的常规输入框类似，但您拥有更多自由。

- Roel

Answer 3

您可以通过将 input 元素的 type 属性设置为 image，将图像转换为 submit 按钮：

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

如需更多信息，请阅读HTML规范中图像按钮状态部分的链接。

- 0b10011