如何修改Bootstrap中的檔案選擇器顯示？

Bootstrap 檔案輸入：修改檔案選擇器顯示

使用Bootstrap 4 的檔案瀏覽器時，您可能會遇到顯示預設「 Choose」的問題檔案...」文字。 >

在Bootstrap 5 中，自訂檔案輸入已被刪除。 🎜>要在Bootstrap 4.4 中顯示所選檔名，可以使用JavaScript：

Bootstrap 4.1

Bootstrap 4.1

Bootstrap 4. ，「選擇檔案...」佔位符在.custom-file-label 元素中設定：

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

可以使用CSS變更按鈕文字：

原始答案（Bootstrap 4 Alpha 6）

<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>

修改初始佔位符和按鈕文本，可以使用CSS：

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

要檢索所選文件名並更新顯示，可以使用JavaScript：

但是，由於佔位符文字是偽元素，JavaScript無法直接修改它。 control-file 範圍中：

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

以上是如何修改Bootstrap中的檔案選擇器顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！