IE中的自定义按钮需要双击而不是单击

Question

请参阅以下链接：

http://jsfiddle.net/HAaFb/55/

不确定为什么这需要双击，如何修改它只需单击即可。 问题只发生在IE浏览器中，与Mozilla一起使用。

HTML：

 <div class="custom-input-file">
        <input type="hidden" value="10000000" name="MAX_FILE_SIZE" /> 
        <input class="input-file" type="file" size="1" onchange="readURL(this);" multiple="multiple" name="files[]" /> 
        Choose files
 </div>

CSS

 .custom-input-file .input-file {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 10000px;
    border: 10000px solid transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    right: -1000px;
    top: -1000px;
    cursor: pointer;
}



 .custom-input-file {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

 .custom-input-file {
  background-color:yellow;
    width: 229px;
    height: 29px;
    font-family: "Tw Cen MT";
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 7px;
    margin: 0 auto;
    color:black;
}

Answer 1

我不会进入小提琴中的代码，因为我假设你的html并不完全是你所拥有的（例如，打开div）。

尝试删除border: 10000px solid transparent;