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

Question

请查看以下链接:

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

不确定为什么这需要双击以及如何将其修改为只需单击即可工作。 该问题仅在与 Mozilla 配合使用的 IE 中发生。

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

我不会深入讨论 fiddle 中的代码，因为我认为这与您在 html 上的内容不完全相同(例如打开的 div)。

尝试移除 border: 10000px solid transparent;