html input button style CSS3

Question

I saw some results via the related questions but didn't actually seem to show what I want. Looking for a way to simply style the button in all major broswers easily.

<input type="file" name="file" id="file" size="29" class="formButton" /> 
<span class="smalltext">(.txt only)</span>

I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?

Answer 1

The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.

Answer 2

Don't try this!

Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!

It's best to let the native file widget show through.

Answer 3

Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.

Answer 4

Actually, with JqueryUI you can do it by simply:

Javascript for rollover (not required):

$(".fg-button:not(.ui-state-disabled)")
                .hover(
                    function(){ 
                        $(this).addClass("ui-state-hover"); 
                    },
                    function(){ 
                        $(this).removeClass("ui-state-hover"); 
                    }
                )

Button Code:

<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">

Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.