如何自定义Bootstrap文件输入按钮的外观？

使用定制的文件输入按钮增强 Bootstrap

尽管 Twitter Bootstrap 很受欢迎，但目前缺乏视觉上吸引人的文件元素上传按钮。虽然按钮仍然是 CSS 无法触及的原生浏览器元素，但有可行的解决方案来自定义其外观。

Bootstrap 3-5：简单的 HTML 解决方案

单独利用 HTML，您可以创建一个类似于按钮的功能文件输入控件：

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

现代浏览器，包括 IE9 ，很容易支持这种方法。但是，为了与旧版 IE 版本兼容，请考虑以下旧版方法。

旧版 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 中点击标签时文件输入激活的不足通过：

• 将文件输入跨越其容器的整个宽度/高度
• 隐藏文件输入元素

以上是如何自定义Bootstrap文件输入按钮的外观？的详细内容。更多信息请关注PHP中文网其他相关文章！