首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-10-30 18:50:02
原创
658 人浏览过

How to Change the

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!