This demo page is related to the article Styling form controls with CSS, revisited. For more info on the purpose of this page, please read the article.
Each file select control consists of this HTML:
<input type="file">
The following CSS rules are used to style the input
elements:
#el01 {width:100%} /* Width */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:"Courier New",Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */
In your current browser, with your current settings, the input
elements look like this:
And here are screenshots from several browsers on different operating systems:
It is worth noting that according to the HTML 4.01 Specification, User agents may use the value of the value attribute as the initial file name.
. However, for security reasons no browsers (at least none of the browsers I have tested) do this.