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..

Answer 1

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!