如何自訂 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;
}

CSS:

此技術確保與舊版 IE的相容性.

額外資訊：

更多詳細資訊和範例，請參閱綜合文章：https://www. abeautifulsite.net/posts/whipping-file-inputs-into- shape-with-bootstrap-3/

以上是如何自訂 Twitter Bootstrap 中的檔案輸入按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！