Стилизация элементов управления HTML-формы

Question

Как мне стилизовать типы ввода «сброс», «кнопка» и «файл», скажем, с изображениями?

Спасибо!

Answer 1

К сожалению, кнопка вашего файла не может быть стилизована без применения хака , но другие типы могут быть стилизованы так:

<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

HTML

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

CSS

<style type="text/css">

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

</style>

Answer 3

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