Skip to content

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
image image

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.

image

That's why we need the true (indicating important) in the @include

Edited by Samantha Ming