web 前端高手请进

bc

最近打酱油打到web 上，遇到一个难题，请坛中高手指点。
问题可简单归结为如下：
如何用CSS对如下的form中的submit button 进行图化，就是把按钮做成图形的按钮，而不是浏览器缺省的按钮。

<form>
<input .....>
<input ....>
<some thing else>
...
<input type="submit" value="back">
...
<input tyoe="submit" value="next>
...
</form>

说明：以上的最终代码来自CMS系统，所以我能适当添加一些tag、class或id 进去，但value的值是CMS 生成的，有长有短。
要求：solution要cross browser.
我目前用sliding door实现，但问题是我发现很难做到cross browser, 这方面我没什么经验。

bc

自己顶一下。高手通常周五比较有闲。

鱼羊鲜

就参考 twitter bootstrap吧
http://twitter.github.com/bootstrap/base-css.html#buttons

razgriz

很简单，你只要在input前面加一个div, 为div定一个class，然后用CSS设定颜色、背景、大小到这个class上就行了。 Cross browser的最大问题在于颜色渐变效果。最直接的莫过于用firefox的插件colorzilla中的CSS Gradient Generator，拖动控件做出想要的渐变和大小，它会自动生成适合于所有浏览器的渐变效果，直接复制进你的class就可以了。然后边缘弧度，阴影效果等想要的话再适当加点。

以上完全是自定义的方式，嫌麻烦只是找个按键生成的网站或者找个写好的CSS STYLE SHEET，引用后把class加上去就行了。

PEACHPANDA

最简单的方法是自己用photoshop画个按钮然后用input type=image 代替 type=submit <input type=image src="你制作的图片"＞就可以了 ps如果楼主觉得有用，请撒点浮云，谢谢
不好意思没看见是用css，还是楼上说得对。

seabookf_91

帮你写了一个 凑活着用吧
http://jsfiddle.net/Seabook_JS/xtRv4/


说实话 这样并不是很好 强行用css来改 很多cross browser issue。
实测 chrome，firefox，IE，Safari 没有问题。

seabookf_91

seabookf_91 发表于 2012-10-19 23:29
帮你写了一个 凑活着用吧
http://jsfiddle.net/Seabook_JS/xtRv4/

楼主如果觉得有用 请加点分 也不枉我深夜写代码的辛苦

bc

razgriz 发表于 2012-10-19 21:09
很简单，你只要在input前面加一个div, 为div定一个class，然后用CSS设定颜色、背景、大小到这个class上就行 ...

由于按钮上的文字不是我可以控制的，也就是长度大小不一，所以我觉得使用固定图片做背景恐怕行不通。

bc

seabookf_91 发表于 2012-10-20 00:32
楼主如果觉得有用 请加点分 也不枉我深夜写代码的辛苦

很遗憾，按钮上的文字是必须显示的，所以你的方案同样行不通。不过你倒是提供了几个技巧，如取消按钮上的文字，定义多个class以及那个实验代码的网站。先加一点分，要是还有更好的，再加。

鱼羊鲜

被无视了。。。

明月星光

用js把input直接换掉…… jquery一行代码的事儿……

bc

鱼羊鲜 发表于 2012-10-21 14:04
被无视了。。。

我本来就是打酱油的，你给个超市地址，我哪知道我的那瓶在哪。

鱼羊鲜