如何在 Twitter Bootstrap 中设置文件上传按钮的样式？-css教程-PHP中文网

如何在 Twitter Bootstrap 中设置文件上传按钮的样式？

Barbara Streisand

发布： 2024-11-23 00:04:20

原创

538 人浏览过

How Can I Style File Upload Buttons in Twitter Bootstrap?

在 Twitter Bootstrap 中设置文件上传按钮的样式

令人惊讶的是 Twitter Bootstrap 缺乏美观的上传按钮。如果可以使用 CSS 自定义此元素，就会出现问题。

使用 HTML 和 CSS 自定义

对于 Bootstrap 3、4 和 5，功能文件输入控件类似于可以单独使用 HTML 创建的按钮：

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

登录后复制

这种方法利用了 HTML5 中的隐藏属性。对于不支持此属性的浏览器，请确保包含以下 CSS：

[hidden] {
  display: none !important;
}

登录后复制

旧版 IE 的旧方法

要支持 IE8 及更早版本，HTML /CSS 需要修改：

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

登录后复制

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

登录后复制

此 CSS 解决了旧版 IE 的问题通过使文件输入在范围内为全宽/高度并且看不见。

以上是如何在 Twitter Bootstrap 中设置文件上传按钮的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！