Search code examples
cssreact-nativeexporeact-native-webreact-native-ui-kitten

How to remove this blue outline in iOS browsers for UI Kitten input component


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!


Solution

  • /* 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