Disable orange outline highlight on focus
AndroidFocusHighlightOutlineAndroid Problem Overview
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:
-
The outline property works only on Chrome, not on the Android browser.
-
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. -
The
-webkit-focus-ring-color
property does not seem to work on either browser.
Android Solutions
Solution 1 - Android
Try:
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7''
Solution 2 - Android
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;
}
Solution 3 - Android
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
in your css file. It worked for me !
Solution 4 - Android
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
Solution 5 - Android
Try for Focus Line
body, textarea:focus, input:focus{
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
Solution 6 - Android
Be aware that using this CSS -webkit-user-modify: read-write-plaintext-only;
WILL remove that horrible highlight 'bug' - BUT it may kill your devices ability to provide a specific keyboard. For us running Android 4.0.3 on a Samsung Tab 2, we could no longer get the numeric keyboard. Even using type='number' &/or type='tel' . Very frustrating!
BTW, setting tap highlight colour did nothing to resolve this issue for this device and OS config. We are running Safari for android.
Solution 7 - Android
To make sure the tap-highlight-color
property overriding works for you, consider these things first:
> Not working:
> -webkit-user-modify: read-write-plaintext-only;
// It sometimes triggers the native keyboard to popup when clicking the element
>.class:active, .class:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); }
// It's not working if defined for states
> Working:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }
This case works for Android from v2.3 to v4.x even in a PhongeGap application. I tested it on Galaxy Y with Android 2.3.3, on Nexus 4 with Android 4.2.2 and on Galaxy Note 2 with Android 4.1.2. So don't define it for states only for the element itself.
Solution 8 - Android
Use the below code in CSS file
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
It's work for me. I hope it work for you.
Solution 9 - Android
I just wanted to share my experience. I didn't really get this to work, and I wanted to avoid the slow css-*. My solution was to download good old Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) and add this one to my phonegap project. I then added:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** Disable orange highlight */
In my experience this is a faster approach to the *, but it is also an approach to less weird bugs. Combination of tap-highlight, -webkit-user-modify: read-write-plaintext-only and disabling of for example text highlighting have provided us with a lot of headaces. One of the worst being that suddenly keyboard input stops working and slow keyboard visualization.
Complete CSS-reset with the orange highlight disabled:
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Solution 10 - Android
This didn't work for me on Image Map Area links, the only working solution was to use javascript by capturing the ontouchend event and preventing default browser behavior by returning false on the handler.
with jQuery:
$("map area").on("touchend", function() {
return false;
});
Solution 11 - Android
This will work not only for taps, but hover as well:
button, button:hover, li:hover, a:hover , li , a , *:hover, * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
Solution 12 - Android
I have tried this one and worked fine :-
HTML:-
<a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a>
css
.html5logo {
display: block;
width: 128px;
height: 128px;
background: url(/img/html5-badge-128.png) no-repeat;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
-webkit-transform: scale3d(0.9, 0.9, 1);
}
Solution 13 - Android
This work for me in Ionic, just put in CSS file to overwrite
:focus {
outline-width: 0px;
}
Solution 14 - Android
<EditText
android:id="@+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background_normal"
/>
Solution 15 - Android
If the design doesn't use outlines, this should do the job:
*, *::active, *::focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
-webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
outline: none!important;
}
Solution 16 - Android
Try following code that disable border outline
> outline: none !important;