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