如何自定义 Twitter Bootstrap 文件上传按钮的外观？

自定义 Twitter Bootstrap 文件上传按钮

尽管 Twitter Bootstrap 中的文件上传按钮没有专用样式，但有多种方法可以增强其外观。

一种适用于 Bootstrap 版本 3、4 和 5 的解决方案，利用 HTML5 隐藏属性来创建函数类似于按钮的文件输入控件：

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

此方法依赖于隐藏属性，Bootstrap 4 使用 CSS 模拟该属性以实现兼容性。对于 Bootstrap 3，可能需要额外的 CSS：

[hidden] {
  display: none !important;
}

旧版 IE 的旧方法：

IE8 及以下版本需要不同的 HTML/CSS结构：

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

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

注释：

• 旧版 IE 不允许点击标签时触发文件输入。
• CSS 通过扩展文件来补偿输入以匹配跨度，然后隐藏它。

更多详细信息和示例，请参阅Abeautifulsite 的博客文章：https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

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