Remove green border around Android application

Question

I am currently having an issue with an Android application built with Cordova having a green frame around the body of the application:

It appears to be due to the web container being in focus, as the green outline disappears when an alert is shown.

This green border does not appear on the iOS version of the application, as well as in the browser or when inspecting the emulator frame using chrome://inspect.

I've tried multiple CSS fixes to try to remove this border such as:

* {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 0px solid #000;
}

As well as disabled all accessibility settings on the devices, but to no avail.

Additional details:

• Android SDK version: 27
• Devices tested on: Nexus 5, Nexus 6, Pixel XL
• Cordova version: 3.6.4 (cannot change due to current framework requirements using MobileFirst)

Does anyone know how this issue can be resolved?

Answer 1

In your

Android/App/src/main/res/values/styles.xml

Add this item, Inside the style tag

<item name="android:defaultFocusHighlightEnabled">false</item>