如何自訂 Bootstrap 4 檔案輸入中的「選擇檔案...」佔位符？

克服Bootstrap 4 檔案輸入的挑戰

在Bootstrap 4 中，檔案瀏覽器顯示持久文字「選擇檔案...」儘管選擇了文件。此問題源自於自訂檔案控制項 CSS 類別中的隱藏值。雖然可以使用 JavaScript 檢索所選檔案的值，但更改佔位符文字可能會更加複雜。

自訂佔位符文字和按鈕顯示(Bootstrap 4.1 )

隨著Bootstrap 4.1 的引入，「選擇檔案...」佔位符位於自定義檔案標籤類別中。要修改此文本，只需新增自訂CSS 或SASS，如下所示：

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

解決隱藏佔位符值

Bootstrap 4 Alpha 6（原始答案） )

1.修改初始佔位符和按鈕文字：

初始佔位符和按鈕文字儲存在CSS 偽元素中。若要自訂它們，請分別使用 :lang(en)::after 和 :lang(en)::before 選擇器覆寫預設值。

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

2.擷取選定的檔案名稱並更新輸入：

選取檔案後，可以使用 JavaScript 取得其名稱。但是，由於佔位符是偽元素，因此無法透過 JavaScript 直接操作它。相反，建立一個額外的CSS 類別來在選擇檔案後隱藏佔位符：

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

選擇檔案後，使用jQuery 切換.custom-file-control 上的.selected 類別來隱藏佔位符並顯示檔案名稱：

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

Bootstrap 5

自訂檔案輸入已在Bootstrap 5 中刪除。若要變更佔位符文本，您可以使用 JavaScript 或自訂 CSS。例如：

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

以上是如何自訂 Bootstrap 4 檔案輸入中的「選擇檔案...」佔位符？的詳細內容。更多資訊請關注PHP中文網其他相關文章！