<form action="" enctype="multipart/form-data">
<div class="uploadbox">
<div> <!-- N7.0 -->
<label for="up" id="lab">Exploring... </label>
</div>
<input name="" type="file" id="up" accept="text/*">
</div>
</form>
.uploadbox {
background-color:#ddd;
border: 1px solid black;
padding: 0.3em;
width: 12em;
height: 5em;
font-family: sans-serif;
}
.uploadbox input[type="file"]{
white-space: normal;
font-size: 0.9em;
height: 1.5em; /* FF0.8, N7.0 */
/* width: 9em; note */
margin-top: 0.3em; /* N7.0*/
margin-bottom: 0.3em; /* N7.0*/
background-color: #eee;
}
.uploadbox label{
color: #000000;
font-size: 0.9em;
display: block;
}
.uploadbox label:hover {
color: #0000C0;
background-color: #eee;
}
#lab:hover:after {
content: "your files";
}
/* Firefox width note: this is the background-width
of the [type="text"]-part (min: 9em),
not the width of [type="file"] */
css-d: Firefox file upload button: formwrapping
No idea how to style the [type="button"]-part in mozilla's /res/form.css, but its possible to wrap the form in Firefox0.8/WinXP (because there is no limiting !important rule for white-space). This might be useful in some designs.
Any ideas, comments and corrections are appreciated.