Setting focus on <button> and making the button show focus (highlighted)-CodePudding

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?

CodePudding user response：

is this is what you want?

button:focus{
  outline: 1px solid red
}

CodePudding user response：

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>