如何自訂Bootstrap 4的檔案輸入元件？

繞過 Bootstrap 4 檔案輸入的限制

Bootstrap 4 提供了自訂檔案輸入元件來簡化使用者的檔案選擇。但是，如果您希望自訂「選擇檔案...」佔位符文字或顯示所選檔案的名稱，您可能會遇到一些挑戰。

更改 Bootstrap 4.1 及更高版本中的佔位符

自 Bootstrap 4.1 起，佔位符文字駐留在 custom-file-label 元素中。您可以使用 CSS 覆寫它：

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

調整檔案按鈕文字

Bootstrap 4.1 不提供更改檔案按鈕文字的簡單方法。要實現此目的，請考慮添加一些自訂樣式：

<code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}</code>

在Bootstrap 4.4 中顯示所選檔案名稱

Bootstrap 4.4 允許您使用純文字顯示所選檔案的名稱JavaScript:

<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})</code>

預先引導4.1 選項：

隱藏初始佔位符：

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

顯示選定的檔案名稱：

<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})</code>

這些方法為自訂Bootstrap 4 的檔案輸入元件提供了彈性，使您能夠根據您的特定要求進行定制。

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