文件上传按钮和奇数文本光标在IE中的行为 [英] File upload button and odd text cursor behavior in IE

问题描述

我建立了一个格式化为典型html按钮的上传按钮，而不是浏览器标准文件上传表单。方法是为锚点元素设置样式，并在顶部覆盖一个透明的文件输入元素。

I've built an upload button that's formatted to look like your typical html button, instead of the browser standard file upload form. The approach was to style an anchor element and overlay a transparent file input element on top.

这种方法在所有浏览器中都可以正常工作，但IE。在IE中，当用户单击上传按钮时，文本光标显示为好像用户已经点击文本输入框。用户可以通过双击按钮来触发文件上传对话框。但这不是我们想要的或任何人期望的行为。

This approach works fine in all browsers but IE. In IE, when the user clicks the upload button a text cursor appears as if the user had clicked on a text input box. The user can trigger the file upload dialog by double clicking the button. But this isn't the behavior we want or that anyone expects.

我很失望，为什么会发生这种情况。我设置了一个jsfiddle演示这里的问题：
http://jsfiddle.net/ davelee / yfSmc / 3 /

I'm at a loss as to why this is happening. I've set up a jsfiddle demonstrating the issue here: http://jsfiddle.net/davelee/yfSmc/3/

推荐答案

设置文件输入元素的宽度和高度， ie8和ie9。

Setting the width and height of the file input element fixes the issue in both ie8 and ie9.

http：// jsfiddle .net / davelee / yfSmc / 4 /

这篇关于文件上传按钮和奇数文本光标在IE中的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！