kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

v5: Fix disabled styling on .form-file (#29022) 

While #28450 overhauled a ton of forms work, the  support for this custom file input was ineffective. This updates the selector to target the custom field and gray out the entire field.

Fixes #28176.
This commit is contained in:
Mark Otto 2019-07-14 02:00:57 -07:00 committed by XhmikosR
parent 6a9fd74a83
commit cef69b9a65
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/forms/_form-file.scss
View File

@ -21,7 +21,7 @@
// Use disabled attribute instead of :disabled pseudo-class
// Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
&[disabled] ~ .form-file-label {
&[disabled] ~ .form-file-label .form-file-text {
background-color: $form-file-disabled-bg;
}
}

12
site/content/docs/4.3/forms/file.md
View File

@ -22,6 +22,18 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
</div>
{{< /example >}}
Add the `disabled` attribute to the `<input>` and the custom markup will be updated to appear disabled.
{{< example >}}
<div class="form-file">
<input type="file" class="form-file-input" id="customFileDisabled" disabled>
<label class="form-file-label" for="customFileDisabled">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}
Longer placeholder text is truncated and an ellipsis is added when there's not enough space.
{{< example >}}