[Solved] Browse File Input Default Styling

[noahgelman]

Is there a way to style the ‘browse file’ input? The file path box isn’t the problem, it’s the ugly ‘browse’ box. Hopefully there’s a CSS way to do it, but if not, what are my javascript alternatives?

[noahgelman]

Yeah, i can target it like that. I can also just target it with ‘input’. They work the same. But CSS doesn’t seem to be very consistent with it.

Such as, If I tell it border none and background red, it’ll take off the border of the file path box and make its background red.

But if I do height 100px the browse button grows to 100px and the input box stays the same height.

[Bob]

Do you mean something like this: http://www.burhankhan.com/css_tricks/styling-file-upload-input-box-in-css/ ?

[noahgelman]

Ah, i see, they wrap it in a div and give that div a background image, and then they set the actual file uploader to 0 opacity so it looks like it’s styled. That’s very clever.

Although I’m a bit disappointed that it doesn’t have an easier way to style it.

[Bob]

This link seems to have some nice info about it as well: http://www.quirksmode.org/dom/inputfile.html

[Author]

Posts