如何自定义Bootstrap文件输入按钮的外观？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-11-28 18:15:13

原创

519 人浏览过

How Can I Customize the Appearance of Bootstrap's File Input Button?

使用定制的文件输入按钮增强 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 中点击标签时文件输入激活的不足通过：