为什么浏览器控制输入类型文件按钮?

13

我很好奇不同的浏览器为什么在浏览文件时有不同的<input type="file">按钮。有很多问题询问如何对其进行样式设置,显然使用某种“hack”方法来改变它们。但没有人真正解释浏览器为什么要控制它们。


顺便提一下,通过&::-webkit-file-upload-button和&::-ms-browse伪类来样式化这些按钮变得更加容易了。但在我了解到这一点之前,我必须走弯路。如果有人正在寻找如何样式化按钮的方法,我写了一系列关于样式化文件输入的博客文章。 - hostingutilities.com
2个回答

8
还记得只有一个浏览器的时代吗?如果在样式中未使用字体,则浏览器必须设置默认字体。不仅字体有默认值,按钮也有默认值。即使未使用样式,元素也需要显示。
随着时间的推移,出现了更多的浏览器,它们可能具有相同的默认字体,但是它们想要彼此区分。
想象一下,开发人员忘记为按钮设置样式,并且没有按钮的默认值。那么会是什么样子?一段文本漂浮在表单下面?那不太好看。
回到问题:文件输入按钮。最初给它一个固定的名称,并且当前的浏览器只是继续实施最初的内容。随着时间的推移,人们习惯了在浏览器中看到的文件上传文本。就像下面的参考所说,一些人,比如老年人或不擅长使用计算机的人(不限于此),可能会在看到另一个字符串后感到困惑。
参考:Change default text in input type="file"? 因此,说控制有点过头了。备用方案听起来更好。 :)

但是在type="file"的情况下,设置默认按钮文本有点过分。 - Dray
我在问题中提到有一些“黑科技”可用,我知道这一点。 - Dray
非常感谢您的回复,我会等待收集更多信息。如果您能找到更多信息,那就太好了。谢谢 :) - Dray
@cweitat +1 对于 fallback 部分的支持。 - Roy

5
正如@cweitat所指出的那样,这始于HTML和浏览器的早期(您还记得马赛克浏览器吗?)。
当时页面数据与浏览器之间的交互仅限于HTML语法和语义。没有可用的javascript修改。
尽管如此,支持将文件(本地到浏览器)上传到服务器(提供页面的服务器)的需求已经得到了很好的接受。方法是提供按钮逻辑的版本以此来实现。按钮一直是除链接以外允许来自浏览器端的活动的HTML元素类型。
当时,在页面上显示的元素并没有考虑过“小部件”,因此可能没有人考虑为选择和上传文件的小部件提供足够的HTML元素设置来影响所有视觉和交互方面的细节。
随着DOM被规范化作为“页面”的表示和javascript成为程序化修改各种方面的机制,不足为奇的是,“用户”也试图获得越来越多的控制权以控制这些按钮的样式和视觉呈现方式。
另一方面,现在影响页面表示的可能性正在迅速增长(几乎爆炸),从而降低了“扩展”当前HTML元素语法的压力。(我看过很多网页,它们避免使用大多数标准HTML元素,而是使用一些javascript中的div元素。)
因此,浏览器控制,因为他们必须提供适当的元素表示方式。由于没有规定该元素应遵循的内部表示方法,但有一些替代方法来实现该功能而不使用这种类型的元素,因此浏览器供应商不太可能麻烦展示页面开发者可以深入挖掘的内部状态(从而允许更多的控制)。
与其他按钮不同,文件输入按钮的视觉表示是一组不同的视觉组件。一个是按钮本身。另一个是显示所选文件的字段。此外(至少在逻辑上),显示可用文件、一些过滤逻辑和更多按钮的弹出窗口也是其功能的一部分。(即使后面的部分通常来自于窗口或操作系统环境,但这只是一个实现细节。)
现在仅仅通过HTML元素并不能以足够的细节指定样式。例如,指定背景颜色:这应该适用于按钮元素还是反馈区域(已选文件)或甚至文件选择弹出窗口?浏览器开发者可以决定向“用户”展示一些用于结构化组件的内部信息。然而,在以前,这并不足够“有趣”,今天您可以使用其他机制。

只是想知道您的意见,为什么 input="file" 必须给出特定的可视化效果,而其他类型则不需要,即使他们必须给出特定的可视化效果,我们难道不能至少编辑它吗? - Dray
一组字符彼此关联,使用特殊的可视化方式可以帮助读者将其识别和解析为单个术语。 - rpy
我不是有意冒犯你,但你的回复充满了抽象性,并没有回答我的问题,能否再看一遍,并尝试更清晰些?虽然我很感激你的回复。 - Dray
1
也许我没有理解你的问题。我认为你问的是为什么不同的浏览器有不同的<input type="file">按钮,以及为什么浏览器要控制它。要解释这个“为什么”,就需要了解HTML和浏览器的历史和发展。如果你想问的是“如何样式化文件输入按钮”,那么我的回答显然没有抓住重点。 - rpy
不需要了,我知道如何对其进行样式设置。好的,谢谢您的回复 :) - Dray
尽管如此,您在提问时有什么特定的重点(和期望的答案)?仍然存在“并没有回答我所问的问题”的情况,我应该至少消除一些。 - rpy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接