vlevsha
vlevsha

Reputation: 265

Styling HTML form controls

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

Thank you!

Upvotes: 0

Views: 679

Answers (3)

Gert Grenander
Gert Grenander

Reputation: 17094

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>

Upvotes: 2

Nick Pyett
Nick Pyett

Reputation: 3408

HTML

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

CSS

<style type="text/css">

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

</style>

Upvotes: 0

reece
reece

Reputation: 8155

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

Upvotes: 0

Related Questions