在所有浏览器中设置统一的<input type =“file”>宽度

CSS或属性需要什么组合?

  • 隐藏实际的控制
  • 用你想要的控件和样式制作一个DIV

该button不是标准的HTML控件。

请参阅: http : //www.quirksmode.org/dom/inputfile.html

怎么了

<input type="file" size="50" .... /> 

? 除了Safari上的Safari浏览器,看起来是一样的我猜(在Mac上,所有浏览器上的所有上传控件看起来都不一样)

除了quirksmode教程,这里还有一个很好的资源: http : //www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

如果隐藏实际的控件,请记住将控件的不透明度设置为零非常重要,而不是实际使用visibility: hidden 。 这样做会实际隐藏元素,禁用点击操作。

另外,如果你用graphicsbutton来隐藏控件,请注意,在某些浏览器(Firefox和IE,我相信)中,当文本结束时,你将无法将光标types改为手形,input文件控件的一部分(它总是默认为input或常规非链接指针)。 是的,我试过用cursor: pointer (和cursor: hand )。

就个人而言,我一直在努力定制上传盒,没有silverlight的子弹让他们的外观或定制完美。 (特别是关于游标的行为,因为我认为这是一个UI交易断路器)。 在这一天结束的时候,我认为接受不同的浏览器会以不同的方式呈现控件更容易,而这正是事实。