Twitter Bootstrap表单文件元素上载按钮

Twitter Bootstrap表单文件元素上载按钮

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

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

的HTML

<label >    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 >    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;}

请注意，当您单击时，旧的IE不会触发文件输入

<label>

，因此CSS“膨胀”可以解决以下问题：

• 使文件输入跨越周围的整个宽度/高度

  <span>

• 使文件输入不可见