关闭焦点上的橙色轮廓高光

我正在使用 jQuery、 jqTouch 和 phonegap 编写一个应用程序，遇到了一个长期存在的问题，当用户使用软键盘上的 Go 按钮提交表单时会出现这个问题。

虽然使用 $('#input_element_id').focus()可以很容易地使光标移动到适当的表单输入元素，但橙色的轮廓高亮始终返回到表单上的最后一个输入元素。(当使用表单提交按钮提交表单时，突出显示不显示。)

我需要的是找到一种方法，要么完全禁用橙色突出显示，要么使其移动到相同的输入元素作为光标。

到目前为止，我已经尝试在 CSS 中添加以下内容:

.class_id:focus {
outline: none;
}

这个可以在 Chrome 中使用，但不能在模拟器或我的手机上使用。我还试着编辑 jqTouch theme.css来阅读:

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

毫无效果。 我还尝试了 AndroidManifest.xml文件中的以下每一项:

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

这些都没有任何效果。

更新: 我已经做了一些更多的故障排除，迄今为止已经发现:

  1. 大纲属性只能在 Chrome 上使用，不能在 Android 浏览器上使用。

  2. -webkit-tap-highlight-color属性实际上可以在 Android 浏览器上使用，但不能在 Chrome 上使用。它禁用焦点和点击的高光。

  3. -webkit-focus-ring-color属性似乎在两个浏览器上都不能工作。

99887 次浏览
小开

Try:

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

Try for Focus Line

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

in your css file. It worked for me !

小开

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

小开

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.

小开

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.

小开

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

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

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

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

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

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.

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


/>
小开

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

Try following code that disable border outline

outline: none !important;

小开

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

:focus {
outline-width: 0px;
}

提交答案