diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss index ba77997d..4eb19950 100644 --- a/scss/forms/_basics.scss +++ b/scss/forms/_basics.scss @@ -220,6 +220,7 @@ input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], + label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { #{$✨}background-color: var(#{$✨}form-element-disabled-background-color); @@ -228,6 +229,10 @@ pointer-events: none; } + label[aria-disabled="true"] input[disabled] { + opacity: 1; + } + // Aria-invalid :where(input, select, textarea) { &:not( diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss index f7d66e56..212837a2 100644 --- a/scss/forms/_checkbox-radio-switch.scss +++ b/scss/forms/_checkbox-radio-switch.scss @@ -7,6 +7,7 @@ */ // Labels + // Not working in Firefox, which doesn't support the `:has()` pseudo-class label { &:has([type="checkbox"], [type="radio"]) { width: fit-content; @@ -14,21 +15,6 @@ } } - // Disabled labels - label:has([disabled]), - [type="checkbox"][disabled] + label, - [type="radio"][disabled] + label { - opacity: var(#{$✨}form-element-disabled-opacity); - pointer-events: none; - } - - label:has([disabled]) { - [type="checkbox"], - [type="radio"] { - opacity: initial; - } - } - [type="checkbox"], [type="radio"] { -webkit-appearance: none;