Disable focus highlighting Android browser (WebKit)

Question

I am trying to create tabs for a webpage. When a webpage is viewed in the default browser on Android 4.0.4, focusing on the input requires a blue glow.

Idle:

Input focus:

I want to disable this blue border (and make my own), but if I set -webkit-user-modify: read-write-plaintext-only , the input will lose its type (HTML type="number" ) and will not move the numeric keypad (for example, in the screenshot).

CSS Properties:

• -webkit-user-modify: read-write-plaintext-only with -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
• outline: none
• border: 0
• box-shadow: none

Can I disable this WebKit feature, but keep the numeric keypad? Thanks;)

Answer 1

Try this :) (change what you need color / opacity

 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);