IE自定义上传按钮光标闪烁,双击上传问题解决

我们使用自定义上传按钮,一般将input type="file"透明覆盖在自定义按钮的上面

image.png

<span class="file">
    <em class="iconfont icon-xuanzezhaopian"></em>
    选择照片<input type="file" class="do-upload-banner" multiple="" name="file" id="">
</span>

这样写在非IE的情况下没有什么问题,当时当在IE里会出现恶心的光标闪烁

image.png
在IE11下解决方法很简单,只需要将 font-size 设置为0,然后给input宽高撑满元素

font-size: 0;
width: 100%;
height: 100%;

这种方法没法解决IE10-需要点击两次才能上传的问题,首先在这我们需要弄明白为什么IE10-需要点击两次才能调出文件选择框

image.png

知道什么原因就好解决了,只要想办法将右边的浏览按钮填充满整个容器就好了

left: auto !important;
right: 0;
font-size: 100px;
width: 200%;
height: 130%;

然而这里的代码和IE11中的有些代码冲突,所以在这里我们需要使用CSS Hack处理

.cursor-blink {
  font-size: 0;
  width: 100%;
  height: 100%;
  left: auto\9 !important;
  right: 0\9 !important;
  font-size: 100px\9;
  width: 200%\9;
  height: 130%\9;
}

注意这里需要将 font-size 尽量设置大一些,如果不设置,依旧是双击才能调出文件选择框

image.png