Custom Not Working In IE

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 no

Solution 1:

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;
}

Solution 2:

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

Solution 3:

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

Solution 4:

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

Solution 5:

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();