在 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;
}CSS:
此技術確保與舊版 IE的相容性.
額外資訊：更多詳細資訊和範例，請參閱綜合文章：https://www. abeautifulsite.net/posts/whipping-file-inputs-into- shape-with-bootstrap-3/以上是如何自訂 Twitter Bootstrap 中的檔案輸入按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
