CSSで:focusにoutlineプロパティを何も適用していないサンプル

キーボードのタブキーのフォーカス時はデフォルトの青枠が表示され、マウスでクリックしたときは枠線が表示されない

※ 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;
}

元記事を表示する