如何使用 Bootstrap 创建自定义文件上传按钮？

使用 Bootstrap 自定义文件上传按钮

虽然 Twitter Bootstrap 中的默认文件输入元素可能缺乏美感，但可以创建一个模仿主蓝色按钮外观的自定义按钮。

解决方案使用HTML：

对于 Bootstrap 3、4 和 5，可以使用简单的 HTML 解决方案：

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

此隐藏输入元素将充当常规文件输入控件，同时保持自定义按钮样式。

针对老年人的传统方法浏览器：

如果您需要兼容 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;
}

同时此方法涉及额外的CSS，它确保与旧版IE浏览器的兼容性。

附加说明：

请注意，HTML解决方案中的隐藏文件输入依赖于HTML5隐藏属性。如果您需要支持更旧的浏览器，则可以使用旧方法。

有关如何显示所选文件的更多信息和示例，请参阅以下资源：

https:/ /www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

以上是如何使用 Bootstrap 创建自定义文件上传按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！