单击div时避免使用：focus样式（仅在Tab键上）

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

我认为您可以使用：active子状态，请尝试在：focus选择器之后添加

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

Codepen