Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Feature/Enhancement: The CSS of custom file input is unnecessarily dumbed-down and limiting.

Created by: neumannjan

There are multiple things to this that I will discuss below. (And none of my suggestions break browser compatibility).

CSS attr() function for the "Browse" text

Why do we need to keep translations for the "Browse" text in CSS? Such limiting workaround is unnecessary, since we can use the well-supported attr() function (it is not experimental technology if you are using it with a content property - proof) for example like this:

.custom-file-label {
 // ...

  &::after {
    // ...
    content: attr(data-button);
  }

And then in HTML:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="id">
  <label class="custom-file-label" data-button="My browse text" for="id">My file text</label>
</div>

HTML5's <label> is allowed to contain other tags such as <span>

Proof here and here (see the "permitted content" section on top).

With this knowledge we are able to do tons of things, such as:

Text truncation

What I was able to do is this: text truncation in practice

I achieved this in my custom project with this code: (note the added <span> tag)

<div class="custom-file">
  <input type="file" class="custom-file-input" id="id">
  <label class="custom-file-label" data-button="My browse text" for="id"><span>Some looooooooooooooooooooooooooooong text</span></label>
</div>

(the SCSS code below extends Bootstrap's code)

.custom-file-label {
        display: flex;
        flex-direction: row;

        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-right: 20px;
        }

        &:after {
            content: attr(data-button);
            position: relative;
            margin: #{-$input-padding-y} #{-$input-padding-x} 0 auto;
         }
    }

"Browse" button as a regular element

We can ditch the ::after element completely and instead use a <span> tag to display the button. This allows us, for example, to use an SVG icon in place of the "Browse" text. (<svg> is permitted content of both <label> and <span> - see proof above.)

These are just examples of what is possible with the custom file input component, without breaking compatibility. If one thing should be included, it is the attr() CSS function. The rest are just suggestions that you may or may not use.