diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 6c5c7c5d96d84f59190996d8203217a1989261a1..4adc49325e264ad161af61f708ca1d85c7fd781c 100644
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -147,6 +147,10 @@
}
}
+ .custom-file-input:lang(es) ~ .custom-file-label::after {
+ content: "Elegir";
+ }
+
> .form-control {
+ .form-control {
margin-top: .5rem;
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 4735bd9a5c9fabd520b219ccdf9a19ad6d72b3ed..a51693e142502c157bf2fa52ea52594ddde8edf4 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1162,8 +1162,17 @@ The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:l
{% highlight scss %}
$custom-file-text: (
en: "Browse",
- es: "Navegar"
+ es: "Elegir"
);
{% endhighlight %}
+Here's `lang(es)` in action on the custom file input for a Spanish translation:
+
+{% example html %}
+<div class="custom-file">
+ <input type="file" class="custom-file-input" id="customFileLang" lang="es">
+ <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
+</div>
+{% endexample %}
+
You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.