v5: Fix disabled styling on .form-file

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.
twbs · Jul 12, 2019 · 6f84be3 · 6f84be3
1 parent 39c4ca3
commit 6f84be3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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 >}}