How to give style (image) for browse button in CSS?

Question

How to apply style (image) for browse button?

I need to give image for browse button, i done in the following way, but the problem is cursor pointer is not working so i cant able to click the browse button in IPAD...

input.file {
    cursor: pointer;
    border: 0 solid #33CCFF;
    opacity: 0;
    padding: 5px;
    position: relative;
    text-align: right;
    width: 350px;
    z-index: 2;
}

can any one help me..

this may help you: http://www.quirksmode.org/dom/inputfile.html — Mr.T.K, Jul 21 '11 at 10:33
yes i checked this example.. but cursor is not coming while hover on that button.. — AnNaMaLaI, Jul 21 '11 at 10:58
@Cakephp.Saint you could just add `input.file.hidden, .fakefile img {cursor: pointer}` to make the pointer cursor appear. — Cristian Necula, Jul 21 '11 at 11:07
possible duplicate of [How apply CSS to browse button](http://stackoverflow.com/questions/4365431/how-apply-css-to-browse-button) — Quentin, Sep 11 '11 at 09:14

Mohsen · Accepted Answer · 2011-09-11T16:37:52.053

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!

i need it to work in javascript, i think the problem might be in the selector as it works when i use button as target instead of file input. — razz, Mar 27 '13 at 01:27

How to give style (image) for browse button in CSS?

1 Answers1