How can I remove this stubborn blue outline (<a> element) from iOS browsers (Safari & Chrome)?

Question

I'm using Tailwind CSS and React.

I've tried about everything under the sun to try and remove this blue outline from my <a>-elements in my page;

This blue outline keeps appearing whenever I chose a menupoint and refresh

My immediate thoughts came to:focus on the a-elements, so I've tried the following:

.tabList {
  @apply mx-5 flex flex-row py-2;

  a {
    &:focus {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }

    &:focus-within {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }

    &:focus-visible {
      outline: transparent !important;
      border: transparent !important;
      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%) !important;
      -webkit-touch-callout: none;
      user-select: none;
    }
  }
}

I've tried about every focus pseudoclass I can think off to try and target iOS, to no avail. Thing is, everything works just fine and I can actually manipulate and remove the border on my local machine (using ngrok to cast the developement port to my iOS device) and it doesn't come back. But whenever I push the same code to development and production, the blue outline keeps coming back. I even tried making the outline a different color (it worked) and iOS is still forcing the thick blue outline over my custom color outline.

I can't think of any relevant -webkit- css-classes I can use either. Many are deprecated or just plain won't work.

Here's a snippet of the actual TSX:

      <Tab.Group selectedIndex={getIndexOfSelecetedTopMenuItem(state)}>
        <Tab.List className={styles.tabList}> // Actual class
          {getToplevelMenuItems(state).map((item) => (
            <Tab as="div" key={item.menuItemId} className="basis-1/3">
              <ButtonTopCategory navigationModelUpdater={navigationModelUpdater} menuItem={item} />
            </Tab>
          ))}
        </Tab.List>

I'm of course keeping accessability in mind, but right now the blue outline is just plain interfering with the design of the page;

Choosing a different (I've chosen the second point here) menupoint still keeps the first on in focus even after refreshing the page

If anybody has experiences with this (I've Googled my ass off), help would be appreciated. Thanks!

I've tried several tested and tried methods to no avail; removing the outline (setting the value to 0 or none), making it transparent, changing the color (iOS forces the blue on it anyways), setting tabIndex prop to 0 or -1..

I expected the blue outline to go away when chosing 0 or none.

UPDATE UPDATE UPDATE

It turns out I was slaying the beast with the wrong tools. I'm using HeadlessUI for the tabs rendering, and it turns out I can use Tailwind CSS to apply styling conditionally. Whenever the tab was selected, I noticed the state of the Tab-component changed to "selected".

I looked up the Headless-UI docs and it turns out you can change the styling when the state changes. I applied "outline-none" as following to the Tab component;

<Tab as="div" key={item.menuItemId} className={"ui-selected: basis-1/3 outline-none"}>

Reference: https://headlessui.com/react/tabs#using-data-attributes

Turns out the state was overriding the manual CSS!

Answer 1

I'm posting your work-around as an answer.

You should not do this without providing a reliable way to render Focus visible

It turns out I was slaying the beast with the wrong tools. I'm using HeadlessUI for the tabs rendering, and it turns out I can use Tailwind CSS to apply styling conditionally. Whenever the tab was selected, I noticed the state of the Tab-component changed to selected .

I looked up the Headless-UI docs and it turns out you can change the styling when the state changes. I applied outline-none as following to the Tab component;

<Tab as="div" key={item.menuItemId} className={"ui-selected: basis-1/3 outline-none"}>

Turns out the state was overriding the manual CSS!