移除 HTML 元素的蓝色轮廓

Posted 2023-03-06

【中文标题】移除 HTML 元素的蓝色轮廓

【英文标题】：Remove the blue outline of HTML elements

【发布时间】：2020-09-26 21:24:18

【问题描述】：

我创建了一个虚线导航，我注意到当我在 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;

【问题讨论】：

也许它将项目符号解释为文本，如 unicode 字符，然后点击该区域来选择它。你试过nav li user-select: none;吗？

是的，我试过了，还是一样。

【参考方案1】：

是outline 或box-shadow

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

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

【讨论】：

感谢您的评论。我在“.nav-items a”上尝试了“outline：none！important”和“box-shadow：none”，但它们都不起作用。

你能做个小提琴吗？

好的，请稍等。