iOS 13 blu selection

Solved
Highlighted
Tourist
4 1 0
Hello,

Anyone have the issue on Debut Theme that once I click something, like menu icon, search filed, etc appears on mobile and sometimes on desktop a blue selection, how can we disable it ? Because before iOS 13 the site worked well without blue selection
0 Likes
Highlighted
Shopify Partner
457 64 128

Do you mean like this?

 

IMG_1702 2.jpg

 

If helpful then please Like and Accept Solution
0 Likes
Highlighted
Tourist
4 1 0
Yes, is it possibile to disable it in all device resolutions?
0 Likes
Highlighted
Shopify Partner
457 64 128

Can't say I've tried, I think it's there for accessibility reasons so I've left it alone. But this article looks like it might shed some light on how to remove it https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chr...

 

I know that's on about Chrome but looks like the same thing.

If helpful then please Like and Accept Solution
0 Likes
Highlighted

Success.

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

/* Optional: Customize .focus-visible */
.focus-visible {  outline-color: lightgreen;
}

It works :) tested in Debut Theme, copy and past at bottom of theme.scss.liquid

0 Likes
Shopify Partner
457 64 128

Great, glad you worked it out.

If helpful then please Like and Accept Solution
1 Like