Ensure consistent opacity for disabled form controls in all browsers #14991
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
thecrypticace
requested changes
Nov 13, 2024
| @@ -475,6 +475,14 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` | |||
| color: inherit; | |||
| } | |||
|
|
|||
| ::file-selector-button:where() { | |||
There was a problem hiding this comment.
This is definitely wrong. Maybe this is a lightningcss bug? Looks like it works in Lightning's playground so we should probably work on upgrading.
Maybe split the selector in preflight temporarily to work around it?
There was a problem hiding this comment.
Ah yeah good catch. Noticing other stuff that's kinda in this same category of fixes, like input elements get a different background color when disabled too. Not sure how far to go with this stuff, tricky.
|
The changes in this PR are included in #15036 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We noticed that in Chrome, disabled
<select>elements were being rendered at 70% opacity, but were being rendered at 100% opacity in Firefox and Safari. After some research, we learned that all form controls in all browsers are rendered at a lower opacity when disabled if you don't include our other Preflight styles, but some of the other normalizations we do in Preflight (specifically stuff around borders) causes each browser to abandon their default/native control styles, and only Chrome persists the user-agent opacity setting it was using for the untouched native control.This PR just sets the opacity for all disabled elements to
1so that there are no surprises and you can style your disabled elements however you want. This is something we ran into on Catalyst, and had to adddisabled:opacity-100to our select controls to avoid since we had our own custom styles for them.