移除 HTML 元素的蓝色轮廓

Question

我创建了一个虚线导航，我注意到当我在 iPad 上单击任何 li 时，会显示两个蓝色轮廓框；单击笔记本电脑时，它们不显示。

我不认为这是 focus 状态，因为我尝试过 a:focus: { outline: none }，它们仍然出现。无论如何要删除这两个丑陋的盒子吗？如果是这样，那会降低可访问性吗？另一种题外话的问题是，当我在我的网站上切换时，导航被完全跳过，知道为什么吗？谢谢！

蓝色框不会显示在 fiddle 上。所以 IDK 如果这会有所帮助...但是如果您发现任何不良做法，请指出，谢谢！

HTML

<nav class="nav"> 
    <ul class="nav-items"> 
        <li>
            <a href="#intro">
                <span class="dot"></span>
            </a>
            <span class="dot-label">Intro</span>
        </li>

        <li>
            <a href="#about">
                <span class="dot"></span>
            </a>
            <span class="dot-label">About</span>
        </li>
    </ul>
</nav>

CSS（部分）

.nav {
  position: fixed;
}

.nav-items a {
  cursor: pointer;
  max-width: 30px;
  order: 2;
}

.dot {
  position: relative;
  height: 10px;
  width: 10px;
  transition: transform 0.2s, background-color 0.5s;
  transform-origin: 50% 50%;
  display: inline-block;
  z-index: 150;
}

.dot-label {
  position: relative;
  display: none;
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: 100% 50%;
  order: 1;
  user-select: none;
}

.nav-items a:hover .dot {
  transform: scale(1.5);
}

.nav-items a:hover + span.dot-label {
  display: block;
  opacity: 1;
}

Answer 1

是outline 或box-shadow

nav li a, nav li {
    outline: none !important;
    box-shadow: none;
}

在这方面，它更令人讨厌，因此最好将其删除。它不会影响可访问性/用户友好性，因为它已经很丑陋了。它的目标显然是让用户清楚什么是“活跃的”