How do I style 'reset', 'button' and 'file' input types, let's say with images?
Thank you!
A:
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);
}
reece
2010-07-12 23:55:11
A:
HTML
<input type="button" name="buttonname" class="form-button" />
CSS
<style type="text/css">
.form-button
{
background-image: url(image.gif);
}
</style>
Nick Pyett
2010-07-12 23:56:44
I did something like this, it didn't work:http://eximi.dreamhosters.com/Hawaii/html/contact_email.phpHere is my CSS:input.print { background-image: url(../assets/images/print_btt.png); width: 119px; height: 47px;}input.upload { background-image: url(../assets/images/uf_btt.png); width: 119px; height: 47px;} input.reset { background-image: url(../assets/images/reset_btt.png); width: 119px; height: 47px;}
vlevsha
2010-07-13 01:17:57
HTML:<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" /> <input class="upload" type="file" name="uploadedfile" /> <input class="reset" type="reset" /> <input class="print" type="button" onclick="window.print()" />Sorry, I'm new here and don't know how to add formatting to the code examples.
vlevsha
2010-07-13 01:21:41
+2
A:
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>
Gert G
2010-07-13 00:25:04