如何修改Bootstrap中的文件选择器显示？

Bootstrap 文件输入：修改文件选择器显示

使用 Bootstrap 4 的文件浏览器时，您可能会遇到显示默认“Choose”的问题文件...”文本。此文本是在 .custom-file-control 元素中使用 CSS 设置的，使用 JavaScript 很难对其进行修改。

Bootstrap 5

在 Bootstrap 5 中，自定义文件输入已被删除。因此，修改文件选择器显示需要自定义 CSS 或 JavaScript 技术。

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>

Bootstrap 4.1

在 Bootstrap 4.1 及以上版本中，“选择文件...”占位符在 .custom-file-label 元素中设置：

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

原始答案（Bootstrap 4 Alpha 6）

修改初始占位符和按钮文本，可以使用 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：

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

但是，由于占位符文本是伪元素，JavaScript无法直接修改它。解决方法是添加一个隐藏伪内容的 CSS 类，并将文件名放在 .form-control-file 范围中：

<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中的文件选择器显示？的详细内容。更多信息请关注PHP中文网其他相关文章！