キーボードのタブキーのフォーカス時はデフォルトの青枠が表示され、マウスでクリックしたときは枠線が表示されない
※ buttonやdiv要素にtabindex属性が付いていないので、SafariやEdgeだとフォーカスされません。
This is a tab focusable scroller...
You need to scroll down to see this line.
<button onclick="alert('Start')">Start</button>
<div class="scroll">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button onclick="alert('End')">End</button>
.scroll, button {
margin-top: 2em;
border-radius: 0.5em;
}
.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
.scroll:focus {
background: lightgreen;
}
.long {
width: 10em;
height: 10em;
}