From cef69b9a658d35cb1b5887f8f063c8f23b860e07 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
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
</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 >}}
--
GitLab