css - Twitter Bootstrap 表单文件元素上传按钮

Question

为什么 twitter bootstrap 没有花哨的文件元素上传按钮？如果为上传按钮实现蓝色主按钮，那就太好了。甚至可以使用 CSS 来优化上传按钮吗？ (好像是无法操作的原生浏览器元素)

Answer 1

这是 Bootstrap 3、4 和 5 的解决方案。

要制作一个看起来像按钮的功能性文件输入控件，您只需要 HTML:

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

这适用于所有现代浏览器，包括 IE9+。如果您还需要对旧版 IE 的支持，请使用下面显示的传统方法。

此技术依赖于 HTML5 hidden属性。 Bootstrap 4 使用以下 CSS 在不支持的浏览器中屏蔽此功能。如果您使用的是 Bootstrap 3，则可能需要添加。

[hidden] {
  display: none !important;
}

---

旧 IE 的遗留方法

如果您需要对 IE8 及以下版本的支持，请使用以下 HTML/CSS:

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

请注意，当您单击 <label> 时，旧版 IE 不会触发文件输入，所以 CSS“膨胀”做了一些事情来解决这个问题:

• 使文件输入跨越周围的整个宽度/高度 <span>
• 使文件输入不可见

---

反馈和补充阅读

我已经发布了有关此方法的更多详细信息，以及如何向用户显示选择了哪些/多少文件的示例:

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/