Question

HTML提交表单的BUTTON怎么用图片来显示

<form id="formcar" name="formcar" method="post" action="提交页面">
<input type="hidden" name="id" value="这里放变量" />
<button type="submit" name="button" style="width:50px;">购买</button>

要BUTTON用图片来代替
请给出能解决的代码，谢谢。

Answer 1

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<button>标签中的样式属性中，加入代码：background: url(small2.png)。

3、浏览器运行index.html页面，此时BUTTON用图片来替代了。

Answer 2

IE6、7、8：
用img代替button，并通过onclick事件调用js提交表单
<img src="..." onclick="document.forms[formcar].submit();"/>

Firefox、Chrome、Opera、IE9+、Safari以及所有移动浏览器：
设置button样式的background-image即可
<button type="submit" name="button" style="width:50px;background-image: url('.....')">购买</button>

追问

你好，再请教下

我是用的IE9内核的浏览器，但是不排除其它访客是IE6，7，8的情况

这个不同的访客看到的情况不一样，显示是什么情况的呢

追答

这个样式你只能顾及一方，IE6、7、8能附加背景色但不会给按钮渲染背景图片的

Answer 3

不用那么麻烦，所有的浏览器都直接用背景图片来代替。直接写样式就行了。
1、给button添加个class，将css样式写到外部，方便日后维护<假设class为my_button>
2、直接加样式
button .my_button{backuround:url(你的图片路径) no-repeat;text-indent:-9999px;border:none;width:你要设置的按钮宽度;height:你要设置的按钮高度;}
测试过多次，各大浏览器显示是统一的。

Answer 4

加上background属性试试