为啥浏览器控制输入类型文件按钮？

Posted 2023-02-24

【中文标题】为啥浏览器控制输入类型文件按钮？

【英文标题】：why do browsers control the input type file button?为什么浏览器控制输入类型文件按钮？

【发布时间】：2016-07-16 14:13:03

【问题描述】：

我很好奇为什么不同的浏览器有不同的<input type="file"> 按钮来浏览文件。有很多问题询问如何设计它们，显然某种“黑客”被用来改变它们。但是没有人真正解释为什么浏览器会控制它？

【问题讨论】：

仅供参考，通过 &::-webkit-file-upload-button 和 &::-ms-browse psuedo-classes 对这些按钮进行样式化变得更加容易。但在我了解这一点之前，我必须以艰难的方式做事。如果有人在寻找如何对按钮进行风格化，我写了一系列博客文章，主要是关于stylizing file inputs。

【参考方案1】：

还记得只有一个浏览器的时代吗？如果样式中没有使用字体，浏览器必须设置默认字体。不仅字体有默认值，按钮也有默认值。即使不使用样式，也需要显示元素。

随着时间的推移，出现了更多的浏览器，它们可能具有相同的默认字体，但不，它们希望彼此区分开来。

假设开发人员忘记设置按钮样式并且按钮没有默认设置。 <input> 会是什么样子？漂浮在表格下方的文本？这不是很明显。

回到问题：文件输入按钮。它最初被赋予了一个固定的名称，当前的浏览器只是继续最初实现的内容。随着时间的推移，人们习惯了他们在浏览器中看到的文件上传文本。就像下面的参考资料所说，有些人，例如老年人或不擅长电脑（不限于）不使用其他浏览器的人，看到另一串文字时可能会感到困惑。

参考：Change default text in input type="file"?

因此说控制力有点太强了。后备听起来好多了。 :)

【讨论】：

但是在 type="file" 的情况下，默认按钮文本有点太多了

我在问题中提到了一些“黑客”可用，我知道这一点。

非常感谢您的回复，我会等到收集更多信息。如果您还可以找到更多，那就太好了。谢谢你:)

@cweitat +1 fallback 位。

【参考方案2】：

正如@cweitat 已经指出的那样，这可以追溯到 html 和浏览器的早期开始（你还记得马赛克浏览器吗？）。

当时页面数据和浏览器之间的交互仅限于 HTML 语法和语义。没有可用的 javascript 修改。

尽管如此，支持将文件（浏览器本地）上传到服务器（为页面提供服务）的需求被广泛接受。为此，要走的路是提供button 逻辑的一个版本。按钮是一种 HTML 元素，允许来自浏览器端的活动（除了链接）。

当时页面上显示的元素没有考虑到“小部件”，因此可能没有人考虑在 HTML 元素上提供足够的设置，以影响与小部件相关的所有视觉和交互方面，以选择和上传文件。

随着后来将 DOM 标准化为“页面”的表示，并将 javascript 作为以编程方式修改各个方面的机制，“用户”也试图越来越多地控制此类的样式和视觉表示也就不足为奇了按钮。

另一方面，如今影响页面表示的可能性越来越大（并且几乎呈爆炸式增长），这也减少了“扩展”当前 HTML 元素语法的压力。 （我看到很多网页都避免使用大多数标准 HTML 元素，而使用带有一些 javascript 的 div。）

所以浏览器控制<input type="file"/>，因为它们必须提供此元素的合适表示。由于没有关于内部表示的规范，因此该元素的实现必须遵循，但是有一些替代方法可以在不使用此类元素的情况下获得功能，浏览器供应商不太可能会费心将内部状态暴露给页面开发人员来摆弄（并且这种方式允许更多控制）。

与其他按钮相比，文件输入按钮的视觉表示是一组不同的视觉组件。一是按钮本身。另一个是显示所选文件的字段。此外（至少在逻辑上）一个显示可用文件的弹出窗口，可能一些过滤器逻辑和更多按钮也是功能的一部分。 （即使后面的部分通常是从窗口或操作系统环境中引入的，但这是一个实现细节。）

现在单纯的 HTML 元素不允许指定足够详细的样式。例如。指定背景颜色：这应该适用于按钮元素还是也适用于反馈区域（所选文件），甚至可能适用于文件选择弹出窗口？浏览器开发人员本可以决定展示一些用于“用户”的组件的内部结构。但是，在过去，它还不够“有趣”，而今天您可以使用其他机制。

【讨论】：

只是想知道你的意见，为什么input="file" 必须被赋予与其他类型不同的特定可视化，即使他们必须提供特定的可视化，我们不应该至少允许编辑它吗？

这组字符属于一起，使用特殊的可视化可能有助于读者识别和“解析”该标记作为单个术语。

我并不是要冒犯你，但你的回复充满了抽象。并且没有回答我的问题，你能再看看并尝试更清楚一点吗？不过，我很感谢您的回复。

那么，也许我没有得到你想要的。我读了为什么不同的浏览器有不同的按钮和为什么浏览器控制它作为问题的本质。要解释为什么，HTML 和浏览器的历史和历史发展是关键。如果您想问如何设置文件输入按钮的样式，那么我的回答显然没有抓住重点。

不，我知道如何设计它。谢谢你的回复:)