Styling HTML form controls
How do 开发者_如何转开发I style 'reset', 'button' and 'file' input types, let's say with images?
Thank you!
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>
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);
}
HTML
<input type="button" name="buttonname" class="form-button" />
CSS
<style type="text/css">
.form-button
{
background-image: url(image.gif);
}
</style>
精彩评论