html - CSS - Div焦点改变蓝色边框高亮颜色

Question

我有一个带有制表位索引集的 div。聚焦时，当前有一个蓝色边框突出显示。是否可以更改此突出显示颜色？如果可以，是否可以纯粹用 CSS 完成？

以下是我到目前为止尝试过的内容。还有 JsFiddle here

非常感谢。

HTML

<div class="test" tabindex="0">
Click Me to Focus
</div>

CSS

.test: focus {
  border: 1px solid black!important;
}

Answer 1

请输入此代码

.test{border: 1px solid transparent;}
.test:focus{
  outline: none;
  border-color: #000000;
 }

当您专注于它时，它不会勾勒出轮廓。因此，您可以随时移除轮廓并在焦点上设置边框或将鼠标悬停。