Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable orange outline highlight on focus

I am coding an app using jQuery, jqTouch and phonegap and have run across a persistent problem which arises when a user submits a form using the Go button on the soft keyboard.

Although it is easy to get the cursor to move to the appropriate form input element by using $('#input_element_id').focus(), the orange outline highlight always returns to the last input element on the form. (The highlight does not show up when the form is submitted using the form submit button.)

What I need is to find a way either to disable the orange highlight completely or else make it move to the same input element as the cursor.

So far, I have tried adding the following to my CSS:

.class_id:focus {
    outline: none;
}

This works in Chrome but not on the emulator or on my phone. I have also tried editing the jqTouch theme.css to read:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

With no effect. I have also tried each of the following additions to the AndroidManifest.xml file:

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

None of which have any effect.

Update: I have done some more troubleshooting with this and to date have found:

  1. The outline property works only on Chrome, not on the Android browser.

  2. The -webkit-tap-highlight-color property does in fact work on the Android browser, though not on Chrome. It disables the highlight on focus as well as on tapping.

  3. The -webkit-focus-ring-color property does not seem to work on either browser.

like image 869
eggdeng Avatar asked Mar 06 '11 12:03

eggdeng


4 Answers

Try:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
like image 176
Baggz Avatar answered Oct 18 '22 07:10

Baggz


Work on Android Default, Android Chrome and iOS Safari 100%

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 
like image 34
sergey_c Avatar answered Oct 18 '22 07:10

sergey_c


* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

in your css file. It worked for me !

like image 36
yesil Avatar answered Oct 18 '22 07:10

yesil


Remove the orange box on input focus for Androids

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

tap-highlight-color for most versions

user-modify for 4.0.4

like image 18
oori Avatar answered Oct 18 '22 08:10

oori