Form: Add invalid styling for form select
Similar to how form input invalid is done (ie form_input.scss), the invalid red styling is using box-shadow.
We need to do the same for form select, otherwise, the invalid red styling won't appear.
Current | New |
---|---|
Proposal
.gl-form-select {
&.is-invalid {
@include gl-inset-border-1-red-500;
&:focus {
@include gl-focus($gl-border-size-1, $red-500, true);
}
}
}
Clean up
Please also clean up the temporary style (utilities.scss) that was introduced in MR > gitlab!55838 (merged)
Note: Focus stated
Also need to ensure the invalid red styling appears in focused state. But there is this challenge with (!important
), so will need to figure out around that.
That's why we need the true
(indicating important) in the @include
Edited by Samantha Ming