聚焦元素时，轮廓以不同的颜色闪烁。如何让它正常工作？

Posted 2023-03-21

【中文标题】聚焦元素时，轮廓以不同的颜色闪烁。如何让它正常工作？

【英文标题】：When focusing on element, the outline blinks in different colours. How to make it work normally?

【发布时间】：2021-12-30 15:22:21

【问题描述】：

我在 Chrome、Edge 和 Canary 中遇到了 :focus-visible 的奇怪行为。我希望导航栏上的锚点在使用键盘聚焦时显示紫色轮廓。他们的班级包括outline: $the-purple-color auto 1px !important。

但是，当我聚焦这些元素时，在很短的时间内，我得到一个黑色轮廓，然后立即切换到正确的颜色。这种黑色似乎来自带有伪类:focus-visible outline: -webkit-focus-ring-color auto 1px; 的“用户代理样式表”，其中-webkit-focus-ring-color 似乎是黑色的。我相信这是黑色轮廓的来源，因为如果我关闭自定义类，它将默认为“用户代理样式表”。

我在网上没有发现这种现象。如何将轮廓保持为一种纯色而不闪烁到默认颜色？

编辑：这是代码：

<header class="main-header">
  <div class="row">
    <div class="col col-12">
      <nav class="navbar">
        <div>
          <ul>
            <li class="nav-item">
              <a>Home</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>

header 
  &.main-header 
    .navbar 
      li 
        a 
          &:focus-visible 
            // $menu-hover-color: #bf00ff
            outline: $menu-hover-color auto 1px !important;
          
        
      
    
  

编辑：我已经尝试过的事情清单：

更改了十六进制颜色的变量。 将变量更改为另一种颜色。 将*:focus-visible 的轮廓标准化为0。 将*:focus-visible 的轮廓标准化为另一种颜色。我仍然得到黑色闪烁。 给包装li 和outline-colour 而不是紫色和黑色，看看黑色闪烁是否被此元素拾取。

【问题讨论】：

你能附上你的代码吗？

我编辑了我的帖子以添加代码。

【参考方案1】：

问题是另一个班级正在添加一个transition: ... all，这会产生意想不到的后果。