Is there a way to style the blue focus ring on text links with CSS?

Viewed 47

I'm having some issues trying to style the :focus state for text links in my SCSS design system, to ensure accessibility on keyboard navigation but also to make it look a bit nicer than the stock box outline.

I've managed to get it working cross-browser for text fields and buttons by using outline:none; and replacing it visually with box-shadow: 0 0 0 2px $color. I have to do this because Safari's focus outline doesn't follow border-radius.

Here's how it looks for form fields: three text fields, the first of which has a custom focus state border

But for text, it still has the blue outline: snippet of text with visited links, one has focus but still has a blue outline

html {
  box-sizing: border-box;
  font-size: 16px;
}

a {
  color: #0000ff;
  text-decoration: underline;
}

p {
  color: #3b3b3b;
  font-family: system-ui;
  line-height: 1.5;
  padding-left: 1rem;
  padding-right: 1rem;
}

a:visited {
  color: purple;
}

a:focus-visible {
  text-decoration: none;
  background-color: #0000ff;
  color: white;
  outline: 0;
  box-shadow: 0 0 0 2px #0000ff;
  border-radius: 2px;
}

a:visited:focus-visible {
  text-decoration: none;
  background-color: purple;
  color: white;
  outline: 0;
  box-shadow: 0 0 0 2px purple;
  border-radius: 2px;
}
<p>Here is some text. <a href="#">Here's one link.</a> And here is some other text in between. And here is another link. <a href="#">Another link.</a></p>

Here's a CodePen demo.

As you can see, when you use tabs or keyboard navigation, when a visited link has :focus, it gets the correct background and text color, but still has a blue focus border, and I can't seem to get rid of it.

Using the Inspector, I can't see any other styles that are overriding it. It does follow the border-radius, so I'm just kind of confused as to where it's coming from.

CSS is supposed to let you stack basic selectors like :visited and :focus-visible, right?

For reference, this isn't exclusive to Safari, it happens in Chrome and Firefox as well, so it does seem to be CSS-related.

0 Answers
Related