4

I'm trying to style inputs for a webpage. When the webpage is viewed on Android 4.0.4 default browser, focusing on an input applies a blue glow.

Idle:

Input focused:


I want to disable that blue border (and make my own one), but if i set -webkit-user-modify: read-write-plaintext-only, the input will lose its type (HTML type="number") and won't slide up a number keyboard (like on the screenshot).

CSS Properties tried:

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

Is it possible to disable this WebKit feature yet keep the number keyboard? Thanks ;)

Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
VCake
  • 323
  • 1
  • 3
  • 10
  • 1
    I think its `outline:none;` – Ali Bassam Feb 25 '13 at 09:51
  • Thanks for the reply Ali, i have tried that, it didn't work. – VCake Feb 25 '13 at 09:55
  • Is this Chrome or the previous Android browser? I'm not sure when the switch was made. If Chrome, have you tried connecting it to a desktop or laptop and debugging in Chrome on that computer. https://developers.google.com/chrome-developer-tools/docs/remote-debugging – pwdst Jan 10 '14 at 20:16

1 Answers1

1

Try this :) (change to what ever color/opacity you want

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Luke Robertson
  • 1,592
  • 16
  • 21
  • Thanks for the answer, but my CSS already has `* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }`. – VCake Feb 25 '13 at 10:10