文件选择(input type=”file”)是一个常用的元素(虽然我比较少用),在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同(Safari 和 Chrome 同是基于 Webkit,故不再详说)。
对于文件选择元素,可以分为2部分,一部分是按钮,一部分是文字展示,如图1:
下面图2~图5是4个浏览器对于3个不同状态下的文件选择元素的呈现:
其中:第一个是默认状态下选择了一个文件;第二个是设定了 300px 的宽度;第三个设定了 50px 的宽度;