如何自訂 Twitter Bootstrap 檔案上傳按鈕的外觀？

自訂 Twitter Bootstrap 檔案上傳按鈕

儘管 Twitter Bootstrap 中的檔案上傳按鈕沒有專用樣式，但有多種方法可以增強其外觀。

一個適用於Bootstrap 版本3、4 和5 的解決方案，利用HTML5 隱藏屬性來建立函數類似於按鈕的檔案輸入控制項：

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

此方法依賴於隱藏屬性，Bootstrap 4 使用CSS 模擬該屬性以實現相容性。對於 Bootstrap 3，可能需要額外的 CSS：

[hidden] {
  display: none !important;
}

舊版 IE 的舊方法：

IE8 及以下版本需要不同的HTML/CSS架構：

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

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

註解：

• 舊版 IE 不允許點擊標籤時觸發檔案輸入。
• CSS 透過擴充檔案來補償輸入以匹配跨度，然後隱藏它。

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

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