How to Apply CSS to ASP:FileUpload Control

Question

How exactly do I style this control?

I have tried this but it doesn't work.

<asp:FileUpload id="upload_tb" runat="server" />

#upload_tb
{
  width: 500px;
}

Also how can I style the browse button that comes with this control? If it is not possible are there other alternatives?

Edit:

I checked the generated source and asp.net gives the control this id ctl00_main_content_upload_tb

I changed the CSS to

#ctl00_main_content_upload_tb
{
  width: 500px;
}

but it does not stretch the control. It adds padding to the right of the control. Any ideas?

Answer 1

You can't officially style an input of type file (*) (which is what the FileUpload control renders on the page) but there are ways using a bit of Javascript &/or CSS - see http://www.quirksmode.org/dom/inputfile.html or http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html - but it isn't trivial.

(*) It's a security measure

Answer 2

Directly, you cannot style the control. A better way would be to use an HTML input type="file" tag which would allow styling as per your stated requirements.
An implementation of this is shown here: http://www.charmhtml.com/contact.html

Otherwise, if you wish to go with a server-side control only, then creating a custom control would be the way to achieve that.

HTH!