My code is simple:
<html>
<body>
Test
<br>
<button onclick="document.getElementById('btn2').focus();">Button 1</button>
<br>
<button id="btn2" onclick="alert('Hello world');">Button 2</button>
</body>
</html>
The question is simple - button one will set focus to button 2. However, the focus is not visible. Only when pressing the Shift key, focus will appear. Focus can also be shown using the tab key, in order to follow focus. I want focus to be visible to the user
My question is how can I set focus and make it visible to the user?
You can try make it visible to the user by adding css to the page
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
<style>
#btn2:focus{
background-color: blueviolet;
}
</style>
is this is what you want?
button:focus{
outline: 1px solid red
}