1

I use UI Kitten + expo + react-native-web for my project, when I open my app in ios browsers, e.g. chrome, safari, the text input when focused has this blue outline, for example: (I can't post images so I will post the links here, sorry for the inconvenience)

Chrome:

https://user-images.githubusercontent.com/75506336/156837622-412e947e-95d5-4836-b6fb-aa760a4c07c6.jpg

Safari:

https://user-images.githubusercontent.com/75506336/156837669-2c0d769a-6c63-4bed-842f-379d03057479.jpg

On desktop browsers and android browsers, this blue outline does not show, it only appears in iOS browsers, how do I get rid of it?

Thanks!

R.Shen
  • 17
  • 4

1 Answers1

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

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

https://stackoverflow.com/a/50570972/16837273 I believe this is what your looking for

smellslikedells
  • 26
  • 2