如何设置输入文件文本框的样式？ [复制]

Posted 2023-03-06

【中文标题】如何设置输入文件文本框的样式？ [复制]

【英文标题】：How can I style input file textbox? [duplicate]

【发布时间】：2011-06-17 22:49:38

【问题描述】：

如何使用 css 为输入文件类型设置 html 样式，以及更改浏览按钮，谢谢

【参考方案1】：

你不能！

你可以用flash来模拟一个文件盒。

【参考方案2】：

简答

你不能。

长答案

使用opacity 使您的文件输入不可见，然后创建一个包含普通文本输入和一个按钮的假div，将其绝对定位以使其覆盖真实输入，然后将其z 索引设置为低于真实输入。为元素设置样式。

当用户点击文本输入或按钮时，他们实际上会点击透明的真实输入。

工作示例：styled file input

【讨论】：

这将触发 NoScript 的 ClearClick 功能，该功能会在用户与部分隐藏的表单元素进行交互时向用户发出警告 - 它看起来像是正在执行恶意操作，尽管在这种情况下，它显然不是恶意的。

你是对的——它会的。不过，它仍然是一种将样式应用于文件输入的工作方法。

【参考方案3】：

你不能。

您可以使用 Flash 控件（通常需要注意事项），或者将自定义控件绝对定位在现有控件之后，并将其 opacity 设置为 0。

这样，对您的自定义控件的明显点击实际上会点击您不可见的输入input。

您可以使用 javascript 从input 捕获文本。浏览器通常只限制您使用文件名。