From cef69b9a658d35cb1b5887f8f063c8f23b860e07 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Jul 2019 02:00:57 -0700 Subject: [PATCH] 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. --- scss/forms/_form-file.scss | 2 +- site/content/docs/4.3/forms/file.md | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss index bbc38a9f81..7e6a0adba5 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 2645d280c8..1c5370bc81 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 {{< /example >}} +Add the `disabled` attribute to the `` and the custom markup will be updated to appear disabled. + +{{< example >}} +
+ + +
+{{< /example >}} + Longer placeholder text is truncated and an ellipsis is added when there's not enough space. {{< example >}}