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

 

Accepted Solution (1)

Accepted Solutions
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.

View solution in original post

Replies 6 (6)
Wahab_Ahmad
Shopify Partner
722 112 178

Hello @Alexander3000, share store link 

Alexander3000
Tourist
3 1 0

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

KenMc
Excursionist
13 1 2

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

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.

View solution in original post

KenMc
Excursionist
13 1 2

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

Gunshraaj
New Member
1 0 0

Hey alex can u help me out with this how to exactly remove the blue line