Применить: фокусируемое видимо при программном фокусировании элементов. ⇐ CSS

[Anonymous]

Я хочу применить стиль к моему элементу, когда я фокусирую его, используя свою клавиатуру или когда сфокусирован программатически с использованием htmlelement.focus () .
e.g в примере ниже. Я хочу, чтобы изначально имел синие границы или когда я фокусирую с вкладкой. Я хочу, чтобы у него была красная граница, только когда я нажимаю , используя мою мышь.
это возможно? Похоже, это все еще работает так, как я хочу здесь, но не в моем приложении . Я понятия не имею, почему. < /P>

Код: Выделить всё

const useFocusOnMount = (ref) => {
React.useEffect(() => {
if (ref.current) {
ref.current.focus();
}
}, [ref]);
};

const App = (props) => {
const divRef = React.useRef(null)

useFocusOnMount(divRef);

return (

Lol

);
};

ReactDOM.render(, document.getElementById("root"));< /code>
.focusable {
border: 1px solid lightgrey;
outline: none;
}

.focusable:focus {
border: 2px solid red;
}
.focusable:focus-visible {
border: 2px solid blue;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/692 ... amatically