I'm trying to use a custom < input type="file" > button. This works in chrome and FF. How do I make it work in IE 10 and above?

The problem in IE is that the browse box is not opening.

html:

<button type="button" id="fileT"><input type="file" id="file"></button>

css:

#fileT{
    overflow: hidden;
    position: relative;
}
#fileT input {
    position: absolute;
    opacity: 0.1
}

I'm trying to use a custom < input type="file" > button. This works in chrome and FF. How do I make it work in IE 10 and above?

The problem in IE is that the browse box is not opening.

html:

<button type="button" id="fileT"><input type="file" id="file"></button>

css:

#fileT{
    overflow: hidden;
    position: relative;
}
#fileT input {
    position: absolute;
    opacity: 0.1
}

• javascript
• jquery
• html
• css

• 4 What is not working... – Wijnand M Commented Sep 23, 2014 at 9:47
• the Browse box is not showing. – Fergoso Commented Sep 23, 2014 at 9:48
• which version of IE..please include in question.. – Hitesh Commented Sep 23, 2014 at 9:50
• I'm using IE version 10. I just updated my post. thanks. – Fergoso Commented Sep 23, 2014 at 9:51

6 Answers 6

I've got what you mean: since <input type="file"/> is hard to style, you need a container. Then try using a <div> instead of a <button>.

Just ensure you specify height and width since the div content will be absolutely positioned (and hence stripped from the flow).

Running demo:

<div id="fileT">
    <input type="file" id="file" />
</div>

#fileT{
    overflow: hidden;
    position: relative;
    width: 75px;
    height: 50px;
}
#fileT input {
    position: absolute;
    opacity: 0.5;
}

I think this approach is wrong. The input field <input type="file"> should not include inside the <button>.

This will work.

<input type="file" id="file">

Just remove that button and try with just input tag.. It works..

Like this

<input type="file" id="file" value="Browse"/>

if you want to have your custom button then you have to remove position:absolute and keep opacity:0

You do not need to surround the input tags with button tags, as the input for file upload automatically creates a browse button for you. When you click it in IE you are just clicking the empty button and not the browse one created by the input which is why it is not doing anything. So instead of:

<button type="button" id="fileT"><input type="file" id="file"></button>

Replace simply with:

<input type="file" id="fileT">

Try this way:-

<input type="file" id="file" multiple="true"/>
    <button type="button" id="fileT">Upload</button>

OR

It might be version problem.

Updated1:-

This is bug from IE 10 Desktop.To be more specific here's the IE 10 Desktop version:

Version: 10.0.9200.16540
Update Versions: 10.0.4 (KB2817183) 
Product ID: 00150-20000-00003-AA459

Refer This

Updated2:- Html:

<div id="wrapper">
    <div id="button">Upload</div>
    <input type="file" id="file" multiple="true"/>
</div>
<div id="notice">Nothing to upload</div>

Css:

#button
{
   
    width: 100px;
    height: 50px;
    background-color: #0f0;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
}

Fiddler

var input = document.getElementById('Selectfile');
if (!input) {
    input = document.createElement('input');
    input.type = 'file';
    input.id = "Selectfile";
    document.body.appendChild(input);
}
input.onchange = function (e) {
    var file = e.target.files[0]; 
};
input.click();