在 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中文网其他相关文章！
