翻译自定义文件输入 Bootstrap 4

Answer 1

这是因为 Bootstrap SASS 没有导入到 Codepen 中。您首先需要

@import "bootstrap/functions"

（因为这就是 $custom-file-text() 所在的位置），进行更改，最后

@import "bootstrap"

....

@import "bootstrap/functions";

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

@import "bootstrap";

我不知道如何将 Bootstrap SASS 导入 Codepen，但这里有一个 Codeply 上的工作示例：https://www.codeply.com/go/2Mo9OrokBQ

---

相关问题：
Bootstrap 4 文件输入

Answer 2

好吧，实现这一点的最佳方法就是覆盖 CSS 伪类 ::after

.custom-file-label::after { content: "Charger";}

Answer 3

如果覆盖 CSS，最好使用“:lang()”选择器仅将标签应用于给定语言：

.custom-file-input:lang(fr) .custom-file-label::after {
    content: "Parcourir";
}

Answer 4

我也有同样的问题。自定义文件标签中的属性数据浏览修复了它：

<div class="custom-file">
   <input type="file" class="cursor-pointer custom-file-input" accept="image/*" id="foto" name="foto">
   <label class="custom-file-label" for="foto" data-browse="Buscar">Seleccione un archivo</label>
</div>