Styling HTML form controls

Question

How do I style 'reset', 'button' and 'file' input types, let's say with images?

Thank you!

Answer 1

Unfortunately you file button can't be styled without applying a hack , but the other types can be styled like this:

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