阻止浏览器自定义浏览按钮答案

【问题标题】：Prevent browsers from customizing browse button阻止浏览器自定义浏览按钮
【发布时间】：2013-04-24 03:55:56
【问题描述】：

如何防止浏览器自定义按钮，例如 Chrome 就可以。

我想删除那个“No f... sen”。最好的方法是什么？

【问题讨论】：

你不能。这就像询问如何在其他浏览器的文件输入版本上删除文件名框。
你可以使用一种叫做Shadow DOM的东西。但它还没有很好地实施。在网上搜索它。 Paul Irish 在他的网站上也有一些关于它的信息。
即使可以，应该吗？向用户显示他们选择了哪些文件（或者在这种情况下，没有选择文件）是一种辅助功能。如果您的目标是以不同方式显示此信息，则出于安全原因，此信息受到保护（尝试读取文件输入的值会读取 c:\fakepath\filename.txt）。

标签： css

【解决方案1】：

在非 IE10+ 浏览器中删除文本部分以使其透明的唯一方法：

input[type=file] { color: transparent; }

但是，我不建议这样做，因为您也无法在选择文件时看到文本。

对于 IE10，您可以使用：

input[type=file]::-ms-value { /* styles here */ }

在 WebKit 中，您可以使用以下方式设置按钮本身的样式：

input[type=file]::-webkit-file-upload-button { /* styles here */ }

在 IE10 中，您可以这样做：

input[type=file]::-ms-browse { /* styles here */ }

【讨论】：

【解决方案2】：

尝试用谷歌搜索“Css 样式文件输入”；）

<input type="file" /> 的样式真的很棘手。

【讨论】：