如何使用 Bootstrap 建立自訂檔案上傳按鈕？

使用Bootstrap 自訂檔案上傳按鈕

雖然Twitter Bootstrap 中的預設檔案輸入元素可能缺乏美感，但可以建立一個模仿主藍色按鈕外觀的自訂按鈕。

使用HTML 的解決方案：

對於Bootstrap 3、4 和5，可以使用簡單的HTML 解：

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

此隱藏的輸入元素將用作常規文件輸入控件，同時保持自訂按鈕樣式。

舊版瀏覽器的舊方法：

如果您需要與IE8 及以下版本，請使用以下HTML/CSS 組合：

HTML:

<span class="btn btn-default 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 瀏覽器的兼容性。

附加說明：

請注意，隱藏HTML解決方案中的檔案輸入依賴HTML5隱藏屬性。如果您需要支援較舊的瀏覽器，則可以使用舊方法。

有關如何顯示所選文件的更多資訊和範例，請參閱以下資源：

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

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