How apply CSS to browse button

I'm using <input type="file" /> in my webpage. I've different CSS classes for button and other controls. But I'm not able to add any开发者_如何学运维 class, style to browse button that appears due to above tag.

Is there any way to change its default appearance?

Thanks is advance.

You can't do that. You could only apply style to the entire <input />.

You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover.

Keep in mind that height: property will not work on Firefox 3.6; You could use font-size: to enlarge the height instead.

I have an example made: http://timc.idv.tw/html5-file-upload/ ; inspect the CSS of the 2nd demo.

You can't style the file input directly, but you can indeed give it some faux styling and/or make it invisible but still clickable. There's an article on how to do so at Quirksmode.

The <input type="file" /> control is notoriously difficult to style.

Here are some articles that can help.

There are also some nice libraries for styling hard-to-skin form elements. Uniform is nice for selects and upload fields.

You can't style a file input button with CSS. This is not the only element that you can not style. Some other inputs are not accepting styles. Look at this fiddle to see many types of inputs. Based on your browser some inputs renders different. Inputs like range input or date inputs are using OS level UI that is not editable by CSS.

What you can do is hiding the file input and showing another element like a div or another input that is accepting styling like button type input as your file input and trigger trigger click and submit (hitting enter) events on your hided actual file input.

Code example:

HTML

<input type="file" />
<label>Select file to upload: <input type="button" /></label>

CSS

input[type="file"]{visibility:hidden; width:0;}

JavaScript:

var fileInput = document.querySelectorAll('input[type="file"]')[0],
    fakeFileInput = document.querySelectorAll('label')[0],
    clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);

fakeFileInput.addEventListener('click', function(event){
   fileInput.dispatchEvent(clickEvent);
}, false);

Look at fiddle in action

So answer of you question is: No, unfortionantly you can not style file input BUTTON!