Disable orange outline highlight on focus

D

16

109

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.

Dragon answered 6/3, 2011 at 12:34 Comment(0)

R

212

Try:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

Reckoning answered 2/4, 2011 at 11:3 Comment(10)

it doesnt work with android 4.0.4 - anybody has experienced the same? (it works on previous versions and 4.1) – Hitandrun 12/9, 2012 at 9:48

android 4.0.4 works with: -webkit-user-modify: read-write-plaintext-only; – Unnerve 6/11, 2012 at 17:4

@Unnerve it does, however that "breaks" iOS by causing the keyboard to pop up. – Headman 9/11, 2012 at 20:49

@Max, you comment isn't clear. on iOS - ofcourse the keyboard pops-up once you focus into an input/textarea.. please explain – Unnerve 11/11, 2012 at 22:1

@Unnerve Ah, I suppose that's not completely clear. For inputs, it makes sense, but this css style is also used for non-input elements. I'm trying to use the user-modify flag to disable the orange flash when you click a link on the Galaxy S III (Android 4.0.4) for example, and while it works, it causes the keyboard to pop up for iPhone when it doesn't for Android -- even for an anchor tag! Hence "breaking" (even if iPhone's behavior might be more correct). – Headman 12/11, 2012 at 1:21

@Unnerve Okay? That doesn't help with non-input non-textarea elements, which was the subject of my comment. – Headman 12/11, 2012 at 20:22

* { -webkit-user-modify: read-only; } Worked for my non-textarea elements on Android. – Holub 21/11, 2013 at 3:24

also add -webkit-tap-highlight-color: transparent; , solved it for i.e. Nexus5(Chrome) and Kindle Fire HD 7''. All other options did not help for these devices/browser. Take care, Firefox and Opera did not need the line on Nexus5. I have taken over the line from one of the other answers below. It was the only way for me to remove tab highlighting on Nexus5 (Chrome) and Kindle Fire HD 7''. – Televisor 26/1, 2014 at 14:48

@Headman I am facing the same issue, have you any workaround ? If yes please share. – Ladyship 21/2, 2014 at 6:41

after adding this also orange border is not hiding in lollipop – Romito 16/6, 2015 at 10:14

I

46

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;
}

Idolah answered 21/7, 2013 at 13:46 Comment(2)

this should be the selected answer – Konstanze 16/4, 2019 at 15:4

Instead of using * you can just use button, if your issue is with buttons for instance. – Seer 10/1, 2020 at 13:1

C

36

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

in your css file. It worked for me !

Casuistry answered 16/6, 2012 at 21:25 Comment(0)

U

18

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

Unnerve answered 6/11, 2012 at 17:3 Comment(3)

Been searching for a fix [Android 4.1.2] for a few days now. This is the only one that worked. A big thank you! – Theoretical 20/2, 2014 at 11:40

@Ben the above answer works for sure... make a plunkr/jsfiddle with your code, so we can see and assist you. – Unnerve 2/4, 2014 at 21:35

@Ben user-modify for 4.0.4 is not good solution any other solution if you have then please share it. – Vahe 24/4, 2015 at 7:34

F

12

Try for Focus Line

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Fribble answered 8/5, 2012 at 7:4 Comment(1)

Only working solution for Android 4.2 devices and similar. – Nonprofessional 22/6, 2016 at 18:38

E

10

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.

Extrados answered 19/2, 2013 at 21:44 Comment(2)

how you are running Safari for android. – Vahe 24/4, 2015 at 7:33

Hey @Amit, its been a long time since i answered this! it was just running straight out of the device as factory standard i would say... Tab2 was pretty new on the market at the time. – Extrados 30/4, 2015 at 23:51

D

7

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.

Discovert answered 21/2, 2013 at 12:19 Comment(2)

This tip is what made it work for me with a WebView on Android 2.3. – Sap 3/5, 2013 at 13:25

WOOOOW This one worked!! (Android 4.1.2) Goddam! I hate webview fragmentation !! – Granulocyte 19/2, 2014 at 19:37

R

7

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.

Rhizome answered 16/9, 2013 at 11:37 Comment(0)

U

3

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;
}

Unthoughtof answered 19/7, 2013 at 20:19 Comment(0)

F

3

This work for me in Ionic, just put in CSS file to overwrite

:focus {
    outline-width: 0px;
}

Fringe answered 13/5, 2019 at 9:29 Comment(0)

W

2

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;
});

Weimaraner answered 8/3, 2013 at 8:20 Comment(0)

U

1

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;
}

Unprincipled answered 2/5, 2013 at 15:50 Comment(0)

L

1

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);
}

Liaoning answered 31/12, 2013 at 7:22 Comment(1)

-webkit-tap-highlight-color: transparent; -> great, solved it for i.e. Nexus5(Chrome) and Kindle Fire HD 7''. All other options did not help for these devices/browser. Take care, Firefox and Opera did not need the line on Nexus5. – Televisor 26/1, 2014 at 14:39

P

0

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

Phore answered 13/12, 2013 at 5:21 Comment(0)

J

-1

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;
}

Jarred answered 18/8, 2013 at 21:16 Comment(0)

B

-1

Try following code that disable border outline

outline: none !important;

Blues answered 26/2, 2015 at 14:34 Comment(0)

Recommended topics

Hot tags