Html 在所有浏览器中设置统一的 <input type="file"> 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/269582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting uniform <input type="file"> width in all browsers
提问by Larsenal
What combination of CSS or attributes are needed?
需要什么样的 CSS 或属性组合？
采纳答案by Diodeus - James MacFarlane
- Hide the actual control
- Made a DIV with the controls and styling you want on top of it
- 隐藏实际控制
- 制作了一个带有你想要的控件和样式的 DIV
The button is not a standard HTML control.
该按钮不是标准的 HTML 控件。
回答by Ionu? Staicu
what's wrong with
怎么了
<input type="file" size="50" .... />
? Will look same except safari on mac i guess (on mac, all upload controls looks different, on all browsers)
? 我猜除了 safari 在 mac 上看起来都一样（在 mac 上，所有上传控件看起来都不同，在所有浏览器上）
回答by Bryan M.
In addition to the quirksmode tutorial, here's another good resource: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
除了 quirksmode 教程，这里还有一个很好的资源：http: //www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
If you're hiding the actual control, remember that it is very important to set the opacity of the control to zero, and not actually use visibility: hidden. Doing that will actually hide the element, disabling the click action.
如果您要隐藏实际控件，请记住将控件的不透明度设置为零非常重要，而不是实际使用visibility: hidden. 这样做实际上会隐藏元素，禁用单击操作。
Also, if you're covering up the control with a graphic button, do be aware that in some browsers (Firefox and IE, I believe), you will not be able to change the cursor type to a hand when it's over the text-input part of the file control (it will always default to the input or the regular non-link pointer). And yes, I've tried using cursor: pointer(and cursor: hand).
另外，如果您用图形按钮覆盖控件，请注意，在某些浏览器（我相信是 Firefox 和 IE）中，当光标位于文本上方时，您将无法将光标类型更改为手形 -文件控件的输入部分（它将始终默认为输入或常规非链接指针）。是的，我试过使用cursor: pointer（和cursor: hand）。
Personally, I've struggled with customized upload boxes, and there is no silver bullet for getting their appearance or customization perfect. (especially concerning the behavior of the cursor, as I consider that a UI deal-breaker). At the end of the day, I think it's just easier to accept that different browsers will render the control differently, and that's just how it is.
就我个人而言，我一直在为自定义上传框而苦苦挣扎，而且没有什么灵丹妙药可以让它们的外观或自定义变得完美。（特别是关于光标的行为，因为我认为这是一个 UI 交易破坏者）。归根结底，我认为更容易接受不同的浏览器会以不同的方式呈现控件，这就是事实。
