如何更改 Bootstrap 4 文件输入中的“选择文件...”文本？

Bootstrap 4 文件输入：自定义“选择文件”...

Bootstrap 4 中的自定义文件输入有一个占位符文本“选择文件” ...”这可能很难改变。让我们探讨两个单独的问题：

1。修改初始占位符和按钮文本

Bootstrap 4 基于 HTML 语言通过 CSS 伪元素设置初始占位符和按钮文本。要覆盖这些值，请使用自定义 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>

2。显示所选文件名

要获取所选文件名，请使用 JavaScript/jQuery：

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

但是，无法直接操作输入的占位符文本。相反，一旦选择文件，请使用另一个 CSS 类隐藏初始占位符，并在附近的元素中显示文件名：

<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 文件输入中的“选择文件...”文本？的详细内容。更多信息请关注PHP中文网其他相关文章！