避免:单击DIV时的聚焦样式(仅在选项卡键上)

Question

在以下最小示例中，我的div充当按钮。它具有Tabindex，因此，如果我使用Tab键并到达元素，则应用类.with-focus的样式。到目前为止还不错。

，但是在按钮上使用鼠标单击时，我也会得到.with-focus类的样式。这就是我要做的不是想要的。可以避免吗？

.with-focus[tabindex]:focus {
	outline: 5px solid green;
}
.btn {
  background-color: #eee;
  border: 1px solid #ddd;
  cursor: pointer;
  height: 50px;
  text-align: center;
  width: 200px;
}

<div class="btn with-focus" tabindex="0" onclick="console.log('clicked')">
  Button
</div>

Answer 1

我认为您可以使用：主动替代，尝试在：focus oplector

之后添加它

.with-focus[tabindex]:active {
  outline: 0;
}

codepen