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).
attr()
function for the "Browse" text
CSS 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>
<label>
is allowed to contain other tags such as <span>
HTML5's 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:
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.