如何自定义 Twitter Bootstrap 中的文件输入按钮？

在 Twitter Bootstrap 中自定义文件输入按钮

在 Twitter Bootstrap 中，文件输入元素缺乏按钮的时尚设计。但是，有一个简单的解决方案可以使用 HTML 创建可自定义的上传按钮。

方法：

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

此方法利用隐藏的 HTML5 属性来创建功能显示为按钮的文件输入控件。按钮的样式继承自主按钮类。

旧版 IE 的传统方法：

对于不支持隐藏属性的浏览器（例如 IE8 及以下版本），请使用这个 CSS 和HTML:

HTML:

<span class="btn btn-primary 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;
}

此技术确保与旧版 IE 的兼容性.

额外信息：

有关更多详细信息和示例，请参阅综合文章：

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

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