diff options
| author | Mark Otto <[email protected]> | 2019-07-14 02:00:57 -0700 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-07-14 12:00:57 +0300 |
| commit | cef69b9a658d35cb1b5887f8f063c8f23b860e07 (patch) | |
| tree | 98ac0261496dfb07ce461786d4c0009e9529d598 | |
| parent | 6a9fd74a83b23a33cc5d07d9c38eb0c02bfb73f6 (diff) | |
| download | bootstrap-cef69b9a658d35cb1b5887f8f063c8f23b860e07.tar.xz bootstrap-cef69b9a658d35cb1b5887f8f063c8f23b860e07.zip | |
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.
| -rw-r--r-- | scss/forms/_form-file.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/file.md | 12 |
2 files changed, 13 insertions, 1 deletions
diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss index bbc38a9f8..7e6a0adba 100644 --- a/scss/forms/_form-file.scss +++ b/scss/forms/_form-file.scss @@ -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; } } diff --git a/site/content/docs/4.3/forms/file.md b/site/content/docs/4.3/forms/file.md index 2645d280c..1c5370bc8 100644 --- a/site/content/docs/4.3/forms/file.md +++ b/site/content/docs/4.3/forms/file.md @@ -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 >}} |