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

您可以在outline-color: black上设置:focus

body {
    padding: 0;
    margin: 0;
}

.test:focus {
    outline-color: black;
}

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

Answer 2

请输入此代码

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

当您专注于轮廓时，它不会与轮廓相接。 因此，删除轮廓并在需要时将边框设置为焦点或悬停。

Answer 3

您可以使用此代码

body {
    padding: 0;
    margin: 0;
}

.test:focus {
    border: 1px solid black!important;
    outline:none;
    box-shadow:none;
}

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

Answer 4

实际上，它是outline-color属性，该属性由浏览器设置为蓝色。

您可以使用Chrome开发者工具，选择一个元素，然后更改其状态以聚焦以查看要应用的样式。

您可以转到元素的“计算样式”选项卡以详细查看

作为上述答案，您可以设置outline-color属性以更改其颜色。

--proxy=http://sub_domain_proxy.sub_domain.domain:port

Answer 5

消除：和焦点文本之间的间隙。使用这个：

KeyError

Answer 6

在聚焦之前移开空间...它将是这样的：

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

Answer 7

您可以使用以下代码。

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