Blue outline on selected variants mobile (Turbo Theme)

Solved
Alexander3000
Tourist
3 1 0

Hello all, today I noticed on mobile when a variant is selected it gets highlighted in blue.

This in my opinion looks really bad sense my theme already highlights what you have selected normally.

Blue-Highlighted-Selections.jpg

I've tried to add this code at the bottom of my theme liquid file but it doesn't seem to work. Please help if you can thank you.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {  outline: none;
}

 

0 Likes
Wahab_Ahmad
Shopify Partner
693 110 158

Hello @Alexander3000, share store link 

Alexander3000
Tourist
3 1 0

it only happens on mobile (Im on iPhone, Safari)

0 Likes
KenMc
Excursionist
13 1 1

I'm not able to duplicate but you might want to try adding one or both of the following lines to style.scss

.tooltip:focus { outline: none !important; }

or

.tooltip:hover { outline: none !important; }

0 Likes
Alexander3000
Tourist
3 1 0

This is an accepted solution.

THANK YOU SO MUCH

The code you sent didn't work but I was able to put

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {  outline: none;
}

In the bottom of style.scss and it was completely fixed.

0 Likes
KenMc
Excursionist
13 1 1

I like it! I don't think i have ever use a wildcard to target css before but if it works great!

0 Likes