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

小编典典

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

css

为什么没有用于Twitter引导程序的精美文件元素上载按钮？如果为上传按钮实现了蓝色的主按钮，那就太好了。甚至可以使用CSS精细化上传按钮吗？（似乎是无法操纵的本机浏览器元素）

阅读 261

2020-05-16

共1个答案

小编典典

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

要制作看起来像按钮的功能文件输入控件，您只需要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;
}

请注意，当您单击时，旧的IE不会触发文件输入<label>，因此CSS“膨胀”可以解决以下问题：

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

2020-05-16