Css for .FileUpload button

Question

I would like to apply this css on my .FileUpload button , but It only works on IE and not on Chrome and I still don't know what is wrong with it. Someone as got an idea ?

Thanks for helping

.FileUpload
{
 width: 90px;
float: left;
color: black;
font-family: Segoe UI,Arial, Sans-Serif;
border: 1px solid #C7D2D8;
height: 30px;
text-decoration: none;
display: inline;
background: white;
margin: 10px 10px 10px 540px;
text-align: center;
padding: 4px 0;
letter-spacing: -1;
border: none;
cursor: pointer;
}

How does it fail for Chrome? What is it? (I'd assume it's an <input type="file"> but you never know.) — user684934
– user684934, Commented Jan 16, 2012 at 15:14
Actually it's a <asp:FileUpload ID="FileUpload1" runat="server" /> — Kiwimoisi
– Kiwimoisi, Commented Jan 16, 2012 at 15:16

Armin · Accepted Answer · 2012-01-16 15:21:26Z

1

AFAIK it is not possible to style an <input type="file">, for all browsers. But you could replace the upload-field with javascript and the replacement can by styled as much as you want.

You'll get an example of such a replacement script in this blog entry.

answered Jan 16, 2012 at 15:21

Armin

16k10 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kiwimoisi Over a year ago

The thing is that it's working on IE , and not on Chrome , isn'it weird ?

Armin Over a year ago

Not really. That different browsers interpret the same style definition differently is not weird! ;-)

Kiwimoisi Over a year ago

But I cant use this Input Type File , because I am using method and properties from the FileUpload component .=(

Armin Over a year ago

The output is normal HTML, isn't it? There doesn't exists any other html tags to upload files, except <input type="file" />.

Armin Over a year ago

Yes, this is the server side programming language, and what is the output? XML/XSLT? I guess it is HTML!

|

Iain Simpson · Accepted Answer · 2012-01-16 17:37:24Z

1

You can try using jquery instead, this would be cross browser compatable then, more info here > http://jqueryui.com/demos/button/#default either that or there are several examples here on different methods of achieving what you want http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

answered Jan 16, 2012 at 17:37

Iain Simpson

8,17113 gold badges49 silver badges67 bronze badges

Collectives™ on Stack Overflow

Css for .FileUpload button

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related