如何自定义Bootstrap 4的文件输入组件？

绕过 Bootstrap 4 文件输入的限制

Bootstrap 4 提供了自定义文件输入组件来简化用户的文件选择。但是，如果您希望自定义“选择文件...”占位符文本或显示所选文件的名称，您可能会遇到一些挑战。

更改 Bootstrap 4.1 及更高版本中的占位符

自 Bootstrap 4.1 起，占位符文本驻留在 custom-file-label 元素中。您可以使用 CSS 覆盖它：

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

调整文件按钮文本

Bootstrap 4.1 不提供更改文件按钮文本的简单方法。要实现此目的，请考虑添加一些自定义样式：

<code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}</code>

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

预引导 4.1 选项：

隐藏初始占位符：

<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 的文件输入组件提供了灵活性，使您能够根据您的特定要求进行定制。

以上是如何自定义Bootstrap 4的文件输入组件？的详细内容。更多信息请关注PHP中文网其他相关文章！