diff --git a/src/components/Select/README.md b/src/components/Select/README.md index c630946149..0e7d400e10 100644 --- a/src/components/Select/README.md +++ b/src/components/Select/README.md @@ -1123,3 +1123,9 @@ LANDING_BLOCK--> | errorMessage | Error text | `string` | | | errorPlacement | Error placement | `outside` `inside` | `outside` | | validationState | Validation state | `"invalid"` | | + +## CSS API + +| Name | Description | +| :------------------------------- | :----------------------- | +| `--g-select-outline-color-focus` | Outline color if focused | diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss index b32c0b3ae2..a56a9cb440 100644 --- a/src/components/Select/components/SelectControl/SelectControl.scss +++ b/src/components/Select/components/SelectControl/SelectControl.scss @@ -195,6 +195,14 @@ $blockButton: '.#{variables.$ns}select-control__button'; &:not(&_error):not(&_view_clear):focus-visible::before { border-color: var(--g-color-line-generic-active); } + + &:focus::before { + outline: 2px solid var(--g-select-outline-color-focus); + outline-offset: -1px; + } + &:focus:not(:focus-visible)::before { + outline: 0; + } } &:not(&_disabled):not(&_no-active):active {