diff --git a/apps/storybook/src/Customization.stories.mdx b/apps/storybook/src/Customization.stories.mdx index c1134d8cf..81aef2c91 100644 --- a/apps/storybook/src/Customization.stories.mdx +++ b/apps/storybook/src/Customization.stories.mdx @@ -137,14 +137,15 @@ as you see fit. For instance, if you'd like to change the color of the curve of ##### Selectors -| Name | Default | Description | -| ----------------------------------------- | -------------------------------------------- | ------------------------------------ | -| `--h5w-selector-label--color` | `var(--h5w-toolbar-label--color, royalblue)` | Text color of label | -| `--h5w-selector-menu--bgColor` | `white` | Background color of menu | -| `--h5w-selector-arrowIcon--color` | `dimgray` | Color of arrow icon | -| `--h5w-selector-option-hover--bgColor` | `whitesmoke` | Background color of options on hover | -| `--h5w-selector-option-selected--bgColor` | `#eee` | Background color of selected option | -| `--h5w-selector-groupLabel--color` | `gray` | Text color of group labels in menu | +| Name | Default | Description | +| ------------------------------------------- | -------------------------------------------- | ------------------------------------ | +| `--h5w-selector-label--color` | `var(--h5w-toolbar-label--color, royalblue)` | Text color of label | +| `--h5w-selector-menu--bgColor` | `white` | Background color of menu | +| `--h5w-selector-arrowIcon--color` | `dimgray` | Color of arrow icon | +| `--h5w-selector-option-hover--bgColor` | `whitesmoke` | Background color of options on hover | +| `--h5w-selector-option-selected--bgColor` | `#eee` | Background color of selected option | +| `--h5w-selector-option-focus--outlineColor` | `gray` | Outline color of focused option | +| `--h5w-selector-groupLabel--color` | `gray` | Text color of group labels in menu | ##### Domain slider diff --git a/packages/lib/src/toolbar/controls/Selector/Selector.module.css b/packages/lib/src/toolbar/controls/Selector/Selector.module.css index 3dea9d466..6ffae60c1 100644 --- a/packages/lib/src/toolbar/controls/Selector/Selector.module.css +++ b/packages/lib/src/toolbar/controls/Selector/Selector.module.css @@ -101,6 +101,11 @@ background-color: var(--h5w-selector-option-hover--bgColor, whitesmoke); } +.option:focus { + outline: 1px solid var(--h5w-selector-option-focus--outlineColor, gray); + outline-offset: -1px; +} + .option[data-selected] { background-color: var(--h5w-selector-option-selected--bgColor, #eee); }