样式化HTML表单控件

Question

我如何设置“重置”，“按钮”和“文件”输入类型的样式，例如图像？

谢谢！

Answer 1

不幸的是，如果不应用hack ，就无法设置文件按钮的样式，但是其他类型的样式可以像这样：

<style type="text/css">
  input[type=button] {
    background-image: url(http://static3.grsites.com/archive/textures/blue/blue003.jpg);
    color: yellow;
    font-weight: bold;
  }

  input[type=reset] {
    background-image: url(http://static2.grsites.com/archive/textures/red/red003.jpg);
    color: yellow;
    font-weight: bold;
  }
</style>

Answer 2

styled.css：

input[@type='button']
{
    background-image: url(button.png);
}

input[@type='reset']
{
    background-image: url(reset.png);
}

input[@type='file']
{
    background-image: url(file.png);
}

Answer 3

HTML

<input type="button" name="buttonname" class="form-button" />

CSS

<style type="text/css">

.form-button
{
  background-image: url(image.gif);
}

</style>