Custom File translated Label

[GeoSot]

I 've done some quick search, without results, so I opened this issue as suggestion

In order to use scss variables we can use the following css with the help of a data-attribute so every developer can use any string he wants

.custom-file-input~.custom-file-label::after {
    content: attr(data-label);
}

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" >
  <label class="custom-file-label" for="customFileLang" data-label="Can't see me?">Seleccionar Archivo</label>
</div>

The result as I tested, below
https://jsfiddle.net/hc0v648r/1/

[Johann-S]

We explain here how to translate : https://getbootstrap.com/docs/4.1/components/forms/#translating-or-customizing-the-strings

[GeoSot]

Yes I have read the above link @Johann-S .... thank you for pointing it to me.

As i wrote on my first message , i suggested the above implementation as a future concern in order to be easy to change the string, on the fly

[Johann-S]

Oh ok sorry for the misunderstanding

[alecpl]

Oh, it would be nice to support this. All we need is to add:

& ~ .custom-file-label[data-label]::after {
    content: attr(data-label);
}

after the :lang() rules in .custom-file-input block.

[alecpl]

Or maybe before? @mdo need a hint, and I'll provide a PR.

[XhmikosR]

/CC @MartijnCuppens

[alecpl]

This is already implemented with #27651. Though, maybe data-label is better than data-browse. Please, consider the change.

[MartijnCuppens]

Indeed, this is already implemented. Not sure if data-label is better than data-browse, @mdo, what do you think?

[MartijnCuppens]

I'm going to close this. Changing this to data-label would be a breaking change at this point.