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

Question

需要什么样的CSS或属性组合？

Answer 1

• 隐藏实际控件
• 使用您想要的控件和样式制作DIV

该按钮不是标准的HTML控件。

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

Answer 2

有什么问题

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

？ 除了我在Mac上的safari之外看起来相同（在Mac上，所有浏览器上的所有上传控件看起来都不同）

Answer 3

除了quirksmode教程，这是另一个好的资源： http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

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

另外，如果你用图形按钮掩盖控件，请注意在某些浏览器（我相信是Firefox和IE）中，当光标结束时你将无法将光标类型改为手形文件控件的文本输入部分（它将始终默认为输入或常规非链接指针）。是的，我已尝试使用cursor: pointer（和cursor: hand）。

就个人而言，我一直在努力使用定制的上传盒，并且没有灵丹妙药可以让它们的外观或定制完美无缺。 （特别是关于光标的行为，因为我认为是UI交易破坏者）。在一天结束时，我认为接受不同的浏览器会以不同的方式呈现控件会更容易，而这就是它的原因。