diff options
| -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 >}} |