如何在 Twitter Bootstrap 中設定檔案上傳按鈕的樣式？-css教學-PHP中文網

如何在 Twitter Bootstrap 中設定檔案上傳按鈕的樣式？

Barbara Streisand

發布： 2024-11-23 00:04:20

原創

539 人瀏覽過

How Can I Style File Upload Buttons in Twitter Bootstrap?

在 Twitter Bootstrap 中設定檔案上傳按鈕的樣式

令人驚訝的是 Twitter Bootstrap 缺乏美觀的上傳按鈕。如果可以使用 CSS 自訂此元素，就會出現問題。

使用HTML 和CSS 自訂

對於Bootstrap 3、4 和5，功能檔輸入控制項類似於可以單獨使用HTML 建立的按鈕：

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

登入後複製

這種方法利用了HTML5 中的隱藏屬性。對於不支援此屬性的瀏覽器，請確保包含以下CSS：

[hidden] {
  display: none !important;
}

登入後複製

舊版IE 的舊方法

要支援IE8 及更早版本，HTML /CSS 需要修改：

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

登入後複製

此CSS 解決了舊版IE 的問題透過使文件輸入在範圍內為全寬/高度且看不見。

以上是如何在 Twitter Bootstrap 中設定檔案上傳按鈕的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！