如何更改 Bootstrap 4 檔案輸入中的「選擇檔案...」文字？

Bootstrap 4 檔案輸入：自訂「選擇檔案」...

Bootstrap 4 中的自訂檔案輸入有一個佔位符文本「選擇檔案」 ...」這可能很難改變。讓我們探討兩個單獨的問題：

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

Bootstrap 4 基於HTML 語言透過CSS 偽元素設定初始佔位符和按鈕文字。名

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

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

要取得所選檔名，請使用JavaScript/jQuery：

但是，無法直接操作輸入的佔位符文字。請使用另一個CSS 類別隱藏初始佔位符，並在附近的元素中顯示檔案名稱：

<code class="JavaScript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
});</code>

這將隱藏預設的「選取檔案...」文字並顯示所選取檔案名稱。

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