Using CSS to style input type=file

In short: not possible.

However, there are ways around it :-)   In fact, there are many different ways around it. I came up with yet another one: make it hidden and use jquery to fill out the form. Here it is:

<form action=”upload_file.php” method=”post” enctype=”multipart/form-data”>
<table>
<tr>
<td align=right>file:</td>
<td><input type=”text” id=bla name=”bla” value=”" readonly><input type=”file” id=file name=”file” size=1 onChange=”copy()”></td>
</tr>
</table>
</form>

<script type=”text/javascript”>
$(function(){
$(‘#bla’).click(function(){
$(‘#file’).click();
});
});

function copy() {
$(“input#bla”).val($(“input#file”).val());
}

So, we hide the “real” file input and replace it with a dummy one which is readonly. When the user clicks it, we popup the real dialogue. Works like a charm!

Leave a Reply