Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

ASP:FileUpload styling issue

10:17 am on Jul 22, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 28, 2009
votes: 0

I have a form that I'm trying to style and all the css classes that i've set up work on all the input boxes except for ASP:FileUpload text boxes and buttons. It seems to pick up the styling border properties in IE but not on Firefox and the buttons display differently.

The idea is to get the input to look the same as it does in IE in Firefox. Can anyone help?

In order to see the site please run it in both IE and Firefox to see the difference:

thanks in advance
4:20 pm on July 22, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

I'm not seeing any differences with Firefox 3.6.6

How about a couple code snippets? the CSS rules for the class in question, and HTML for the elements your styling within the form tag.
8:39 am on July 23, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 28, 2009
votes: 0

thanks for looking at this for me:

This is the html:-

<div style="display:inline-block;">
<asp:FileUpload ID="FileUpload1" runat="server" Cssclass="input" style="width:500px;margin-top:3px;" TabIndex="11" /><br /> <asp:CustomValidator ID="ValidFileExts" ControlToValidate="FileUpload1" runat="server" ErrorMessage="Invalid File Extension" ClientValidationFunction="ValidateFileExts" ForeColor="#e79778" OnServerValidate="ValidateFilExts_ServerValidate"></asp:CustomValidator></div>

css class:-

.input {height:18px; background-color:#ffffff; padding:2px 0 0 5px; font-size:12px; color:#313131; border:1px solid #787878;}

I can't actually see a part in the code that allows me to control the browse button with a different class.

I've checked the version of firefox we are running our servers and it's 3.5.11.

I've taken some screenshots to show you what it looks like.

thanks for your help
1:32 pm on July 23, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 10

Note, that is not the HTML, that is the ASP code. After your page has been displayed, do View > Source and that will show you the actual HTML. You will likely see an <input type="file" ...> in the output.

Styling an input type="file" element has been notoriously problematic. If you do a search for "style file input" you will find more information. Safari, for example, has a totally different model (there is not text box displayed at all). There are some workarounds that require a bit of CSS and JavaScript, but I've never tried it myself, so I will defer to what you can find by searching.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members