styling the asp:fileupload control

Question

I have a file upload control in asp.net like so:

<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />  

For some reason the Browse... button does not apply the standard CSS that I have applied to any input[type="button"] controls.

How can I apply the same CSS to the Browse button of that control?

Answer 1

try this

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>

some css

.hidden {
    display:none;
}
.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

JS

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

Demo

Answer 2

Since the OP was about ASP.NET and the accepted answer was HTML / javascript, I thought I'd answer it in ASP.NET terms:

ASP.NET portion:

<asp:FileUpload ID="fileUpload" runat="server" style="display:none" /> <input type="button" value="Select your file" id="browse"></input>

JQuery, with jQuery UI for .button() portion:

$("input:button").button(); ... $("#browse").click(function () { $("#<%= fileUpload.ClientID %>").click(); });