IE需要双击自定义按钮

Question

我有一个潜水的脚本:

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

JavaScript(JQuery 2):

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

CSS:

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

注意:在使用模糊隐藏IE中的闪烁图标之前,存在此问题.

在Chrome和Firefox中,按钮只需单击一下即可.在IE 10中,它需要双击,我不想要.我试图想办法让它单击一下.

到目前为止我唯一尝试过的是.render("click")输入,但是没有用.

JSFiddle:http://jsfiddle.net/plowdawg/mk77W/

Answer 1

我有同样的问题,发现了不同的方法.我只是把那个按钮变成了我需要的大字体就可以了.那么人根本无法点击文字部分.

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

和css:

.divFileUpload {
    background-color: #F60;
    border-radius: 5px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    width: 50%
}
.fileUpload {
    cursor: pointer;
    font-size: 10000px; /* This is the main part. */
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

Answer 2

跟进SDLion所说的内容......
这可能就是你所看到的

但实际上,有一个文件上传控件已经变得透明.
单击浏览按钮只需单击一下即可打开文件上载对话框.在IE中如果要查看文件上载对话框,则必须双击其左侧的文本框.

增加文件输入的字体大小以填充按钮图像