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中文网其他相关文章!