How to set keyboard focus CSS on ion-select with popover interface?

Ionic Framework
1

I have an ion-select popup using the popover interface for the list - aiming to create something like an HTML select control, but better. And importantly, keyboard-accessible.

What CSS properties/values should I set to indicate keyboard focus? Ie. open up list with a keypress, and use arrow keys to navigate up/down the list. How can I highlight the “current focused item”? Either CSS Shadow Parts or CSS Custom Properties.

This is an example of what I’m trying. The hover styles work, but the focused ones (in bold) don’t.

ion-item {

--background: var(--select-option-background);

--background-hover: var(--select-option-background-hover);

--background-hover-opacity: 1;

--color: var(--select-option-text);

--color-hover: var(--select-option-text-hover);

**--background-focused: var(–select-focused-color);**

**--background-focused-opacity: 1;**

}

I’m using Ionic v8 with Angular v19.

Any pointers would be greatly appreciated.

2

I’ve managed to solve it myself. What’s needed is this:

ion-item {

:focus {
    background: var(-–select-focused-color);
}

}

So the shadow parts and the CSS custom properties didn’t work, but this did.