【发布时间】：2010-09-21 03:21:16
【问题描述】：
需要什么样的 CSS 或属性组合？
【问题讨论】：
标签： html css cross-browser
【发布时间】：2010-09-21 03:21:16
【问题描述】：
【讨论】：
-
所以没有办法使用本机控件本身来实现这一点？
-
绝对不需要使用不透明度 - 您可以简单地将点击委托给 display:none 元素 - 简单得多，您不必考虑（变化的）输入大小。
-
浏览器不允许将点击文件输入作为安全功能。所以，我们需要 hack 的不透明度
怎么了
<input type="file" size="50" .... />
？ 我猜除了 mac 上的 safari 之外看起来都一样（在 mac 上，所有上传控件在所有浏览器上看起来都不同）
【讨论】：
-
input-width 什么都不做。您可能正在考虑 input-size，它确实会改变宽度，但不是以您可以跨浏览器标准化的单位。
-
这行得通...它处理 firefox..而 CSS width 属性处理 Chrome、IE 和 Safari
-
如果您想设置更精确的尺寸，可以在使用 javascript 进行二进制搜索时使用隐藏的可见性...！我怀疑它是否值得，但我更喜欢这个而不是隐藏实际控制。
-
W3C 无法验证属性
size，因为它只允许text, search, url, tel, e-mail, or password类型的字段。 -
“文件”输入看起来和闻起来都像“文本”输入，所以我想知道非验证的意义何在，真的。是的，我知道它不像“文本”，但仍然需要字符，并且是一个非常相同的框......
除了 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 交易破坏者）。归根结底，我认为更容易接受不同的浏览器会以不同的方式呈现控件，事实就是如此。
【讨论】：