Remove the blue outline of HTML elements

Question

I have created a dotted nav, and I noticed that when I click any li on iPad, two blue outline boxes would show; when clicking on laptop, they don't show.

I don't think this is the focus state because I tried doing a:focus: { outline: none }, they were still appearing. Is there anyway to remove these two ugly boxes? If so, would that decrease the accessibility? Another sort of off-topic question is that, as I was tabbing through my website, the nav was completely skipped, any idea why? Thank you!

Blue boxes don't show on fiddle though. So IDK if this would be helpful... But if you notice any bad practice, please do point it out, thanks!

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 (partial)

.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;
}

Maybe it's interpreting the bullets as text, like unicode characters, and touch-clicking the area is selecting it. Have you tried nav li {user-select: none;}? — Evan Messinger

zanderwar zanderwar · Accepted Answer · 2020-06-08T00:07:03

It's either outline or box-shadow

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

In that regard, it's more of a nuisance so it's better to remove it. It won't affect accessibility/user friendliness because it's already ugly. It's goal is obviously to make it clear to the user what is "active"

Remove the blue outline of HTML elements

1 Answers