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

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?

javascripthtmlbuttonfocus


Solution 1:[1]

is this is what you want?

button:focus{
  outline: 1px solid red
}

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 PaulWanjohi
Solution 2

Related Questions