自定义文件输入样式 | CSS-Tricks

如果你对 Webkit/Blink/Chrome 特定的样式感兴趣，有一个专有的伪元素可以隐藏，然后使用一个同样非标准的伪元素-on-an-input

<input class="custom-file-input" type="file">

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

演示

公平警告：它不会向您显示所选的文件名，但您可能可以对其进行调整以实现这一点。我发现通常情况下，这些天您会在文件选择后触发一个事件，并以这种方式获取数据。

WTF 表单

始终值得查看 WTF 表单的实现方式

您可能还对如何使用 CSS 样式化常见表单元素或表单输入验证在 DigitalOcean 上感兴趣。

Harsha

# 2013 年 12 月 19 日

单击按钮后，会出现一个橙色的额外边距，请问如何删除它？

Tarun

评论永久链接# 2013 年 12 月 30 日

使用 outline: none;
Somesh

评论永久链接# 2015 年 1 月 1 日

在 css 中写入 outline:none; 您的问题将得到解决。那个橙色的默认颜色不会出现

JuanMa Ruiz

# 2014 年 1 月 13 日

感谢分享。代码中有一个小错误

.custom-file-inputhover::before {
      border-color: black;
}

必须是

.custom-file-input:hover::before {
  border-color: black;
}

Chris Coyier

评论永久链接# 2014 年 1 月 13 日

已修复，谢谢！
Lee

评论永久链接# 2020 年 8 月 18 日

有没有办法摆脱浏览器中出现的“未选择文件”文本？

Julian

# 2014 年 1 月 13 日

它周围有一些额外的空间，这在我的使用情况下很烦人。有没有办法删除它？
(查看图片) http://www.abload.de/img/screenshots2014-01asxy4.png

Pawel Sledzikowski

评论永久链接# 2014 年 3 月 18 日

我也注意到伪元素:before 之后有一个额外的不可见（但可点击）的空间。

事实上，那个“额外”的空间实际上是真正的input 文件元素。

我只是通过将visibility: hidden 设置为主输入元素来解决此问题，
并将visibility: visible 设置为伪元素之前（以及对其进行absolute 定位）。

在这种情况下，不再有不可见的白色空间，尽管您的伪元素实际上超出了主流程，这对于您来说可能是可接受的，也可能不可接受，具体取决于您的情况。

Fiddle: http://jsfiddle.net/GALPG/
Jamie Katz

评论永久链接# 2014 年 5 月 11 日

谢谢 Pawel，这很有效。Firefox 似乎没有这个问题：您可以将输入设置为任何您想要的宽度。
Mark

评论永久链接# 2014 年 6 月 12 日

嘿，有了 Pawel 的修复，我提供了事件处理。

http://jsfiddle.net/GALPG/16/
Anant Raj

评论永久链接# 2014 年 7 月 2 日

不

ricardo

# 2014 年 2 月 14 日

它在 IE 9 上不起作用 :(

Chris Coyier

评论永久链接# 2014 年 11 月 28 日

请参阅代码片段的标题。

Henry

# 2014 年 3 月 3 日

我想知道这将在哪些浏览器中起作用？

Chris

评论永久链接# 2014 年 3 月 5 日

@henry 它应该在 Safari 和 Chrome（以及使用其渲染引擎的任何其他应用程序）中起作用。它不会在 IE 中起作用，因为 IE 使用不同的渲染引擎。

Henry

# 2014 年 3 月 5 日

谢谢 Chris。讨厌的 IE 总是破坏聚会！尽管如此，这仍然是一个很好的解决方案

Rakesh

# 2014 年 4 月 21 日

这个“自定义文件输入”在 Firefox 中不起作用。Firefox 正在采用默认样式。

shalini

# 2014 年 5 月 9 日

有没有办法更改光标类型，例如（cursor:pointer）？

shalini

# 2014 年 5 月 9 日

我找到了答案。

.custom-file-input {
color: transparent; cursor: pointer!important;
}

谢谢。它很容易使用。

Sigma

# 2015 年 8 月 5 日

替代解决方案

<style>
.custom-file-input {
    width: 50px;
    overflow:hidden;
}
</style>

yogish d naik

# 2014 年 5 月 30 日

在 ie 中不起作用。

Chris Coyier

评论永久链接# 2014 年 6 月 2 日

请参阅代码片段的标题。

Zenobius

# 2014 年 6 月 28 日

您是否截取了它应该是什么样子的屏幕截图？在使用 Ubuntu 14.10 的 Firefox 30.0 上，只有这样：http://i.imgur.com/Bwh0oeP.png

Timothy

# 2014 年 7 月 12 日

这在我的今天最新使用的 Firefox 中显示了一个未设置样式的“浏览”...

Chris Coyier

评论永久链接# 2014 年 7 月 13 日

请参阅代码片段的标题。
jondoe

评论永久链接# 2014 年 8 月 11 日

webkit blink

kajal

# 2014 年 7 月 15 日

以这种方式为输入类型文件设置样式非常容易，因为只使用了 css。它解决了我的查询。

Kunal

# 2014 年 7 月 16 日

我们如何显示我们选择的文件的名称和类型... 也就是说，如果我选择一个名为 xyz 的图片文件，它应该显示为 xyz.jpg

José Barros

# 2014 年 8 月 7 日

嗨，感谢您的代码。不过我有一个问题。由于我的网站将使用不同的语言，所以我不能使用 css content 属性，因为文本将使用不同的语言。有什么替代方法吗？谢谢！

SAID ASSEMLAL

# 2014 年 8 月 9 日

我创建了一些东西，对于这种情况来说更有帮助，这是一个 jQuery 插件，它使您能够对文件输入的方方面面进行样式化，还可以通过几个回调来控制它：）。我希望这可以帮助到某些人。

这是 GitHub 上的源代码：简单的输入文件

Adriana Cajina

# 2014 年 8 月 28 日

如何反转元素的顺序？我的意思是，如何将按钮放在左侧，并将文件路径文本放在右侧？

Didik

# 2014年9月3日

文件名没有显示。我们可以在选择文件时添加指示器吗？

Bilal khan

# 2014年9月9日

这个技巧非常有用，谢谢……

SamHeisenberg

# 2014年9月15日

孩子，输入标签不能像 img 标签那样使用伪元素

TonyWilk

# 2014年10月1日

在浏览器中，这在……上不起作用，你可以覆盖实际的按钮


        
        
        
              Read a file...

基本要素是
1. 输入元素和覆盖 <div> 必须有 position: （为了让 z-order 起作用）
2. 覆盖必须有更高的 z-order
3. 覆盖必须有 pointer-events:none

你的，
TonyWilk

Rory Morris

评论永久链接# 2015年8月12日

这在较新的浏览器中确实有效，但不要忘记旧版本的 IE 不支持 pointer-events:none。

我的做法是

1) 自定义样式元素位于 z-index:0
2) 文件输入绝对定位在顶部，z-index:1
3) 文件输入设置为 opacity:0，使其不可见

演示在此处：http://jsfiddle.net/wuguf376/

Ross

# 2014年10月9日

或者隐藏它，并使用一个有样式的“作为点击器
http://codepen.io/rosscosack/pen/opHxF

Hazem Taha

评论永久链接# 2015年2月24日

好主意；)

pinoromano

# 2014年10月26日

非常酷的技巧！
它比在 Quirksmode.org 上广泛提到的方法更容易
然而，它似乎不适用于 Firefox，Firefox 会显示默认按钮，带有根据浏览器安装语言的“浏览”标签，以及显示“未选择文件”的标题，只要没有选择文件（如果选择一个文件，它将被文件名替换）。
是否至少可以隐藏此标题？为了只显示默认的浏览器按钮？
感谢您提前提供帮助（我不是 CSS 专家）。

Rajni

# 2014年11月28日

这难道不适合浏览器吗？？？
我在 Firefox 中运行时遇到了问题。

谢谢

Chris Coyier

评论永久链接# 2014年11月28日

请参阅代码片段的标题。

（我现在只是在玩乐 :))

Lohith

# 2014年12月9日

嗨，

这在 Chrome 中运行得很好。有没有 Mozilla 浏览器的解决方案？

Mihir

# 2015年2月24日

Mozilla 的是什么：moz？还有 IE 和 Opera 呢？

shashi

# 2015年4月27日

在 Firefox 中不起作用……
.custom-file-input:before 不起作用……有什么建议吗

pradeep

# 2015年5月14日

在 Firefox 中不起作用

Brad Martin

# 2015年7月15日

我想没有多少开发人员知道 WebKit/Blink 的含义。如果我能因为知道这一点而加薪，而这么多人不知道……

Rory Morris

评论永久链接# 2015年8月12日

或者也许他们只是“自己动手”帮派的成员。

任何不知道 WebKit/Blink 是什么的 Web 开发人员，都不是 Web 开发人员：P

Fernanda

# 2015年9月17日

您好，非常感谢。这正是帮助我的地方！

deepak

# 2015年11月18日

伙计们，建议我一个事情，我们如何使用 css 和 HTML 显示浏览按钮后的选定文件名

Shamal

# 2016年1月22日

function example() {
location.href = ‘http://youtube.com’;
}

Thany

# 2018年11月22日

在这两个例子中，我无法看到当前选择了哪个文件（Windows 10 上的 Firefox）。
因此，从这个意义上说，体验比使用原生文件上传器更糟糕。

Ankush

# 2019年7月30日

尝试使用 ::-ms-browse 用于 IE，在 IE11 中有效。

几乎

# 2019年12月13日

文件名（“未选择文件”）显示在标签后面。:/

Anton Theunissen

评论永久链接# 2020年3月13日

为不可见元素设置更大的宽度

Jefferson Real

# 2022年3月10日

对于像我一样在 2022 年才加入这场比赛的晚辈来说，现在有一个标准的（跨浏览器）伪元素

input[type="file"]::file-selector-button { /* 自定义 CSS */ }

演示

WTF 表单

评论

发表评论 取消回复

发表评论取消回复