如何自訂Bootstrap檔案輸入按鈕的外觀？

使用自訂的檔案輸入按鈕增強 Bootstrap

儘管 Twitter Bootstrap 很受歡迎，但目前缺乏視覺上吸引人的檔案元素上傳按鈕。雖然按鈕仍然是 CSS 無法觸及的原生瀏覽器元素，但有可行的解決方案來自訂其外觀。

Bootstrap 3-5：簡單的HTML 解決方案

單獨利用HTML，您可以建立一個類似瀏覽按鈕的功能檔輸入控制項：

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

現代瀏覽按鈕的功能檔輸入控制項：

現代瀏覽按鈕的功能檔輸入控制項：

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

現代瀏覽按鈕的功能檔輸入控制項：

.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;
}

現代瀏覽按鈕的功能檔輸入控制項：

• 現代瀏覽按鈕器，包括IE9 ，很容易支援這種方法。但是，為了與舊版 IE 版本相容，請考慮以下舊版方法。
• 舊版IE 的舊版方法

要支援IE8 及更低版本，請使用以下HTML/CSS 組合：這種技術被稱為為“CSS 膨脹”，可以彌補舊版IE中點選標籤時檔案輸入啟動的不足通過：將檔案輸入跨越其容器的整個寬度/高度隱藏檔案輸入元素

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