在焦点上禁用橙色轮廓高光

我使用jQuery，jqTouch和phonegap编写了一个应用程序，并且遇到了一个持续的问题，当用户使用软键盘上的Gobutton提交表单时就会出现这个问题。

尽pipe通过使用$('#input_element_id').focus()可以很容易地将光标移动到合适的表单input元素，但是橙色的轮廓高亮总是返回到窗体上的最后一个input元素。 （当使用表单提交button提交表单时，突出显示不会显示。）

我需要的是find一种方法来完全禁用橙色突出显示，或者使其移动到与光标相同的input元素。

到目前为止，我已经尝试添加以下到我的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. outline属性仅适用于Chrome，不适用于Android浏览器。

  2. 事实上， -webkit-tap-highlight-color属性在Android浏览器上工作，但不在Chrome上。 它禁用焦点以及点击高亮。

  3. -webkit-focus-ring-color属性似乎在任一浏览器上都不起作用。

尝试： 

 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; // ie Nexus5/Chrome and Kindle Fire HD 7'' 
 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

在你的CSS文件中。 它为我工作！

使用Android默认，Android Chrome和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; }

移除Android上input焦点的橙色框 

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

点击高亮颜色的大多数版本

用户修改为4.0.4

尝试对焦线 

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

注意使用这个CSS -webkit-user-modify: read-write-plaintext-only; 将删除那个可怕的突出“错误” – 但它可能会杀死您的设备提供特定键盘的能力。 对于我们在Samsung Tab 2上运行Android 4.0.3，我们不能再获得数字键盘。 即使使用type ='number'＆/或type ='tel'。 非常沮丧！ 顺便说一句，设置突出显示颜色没有任何解决这个问题的设备和操作系统configuration。 我们正在运行Safari的Safari。

为确保tap-highlight-color属性覆盖对您有用，请首先考虑以下事项：

不工作：
-webkit-user-modify：只读-plaintext-only;
//点击元素时，有时会触发本机键盘popup

.class：active，.class：focus {-webkit-tap-highlight-color：rgba（0,0,0,0）; }
//如果为状态定义，则不起作用

加工：
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

即使在PhongeGap应用程序中，这种情况也适用于从v2.3到v4.x的Android 。 我使用Android 2.3.3在Galaxy Y，使用Android 4.2.2的Nexus 4以及使用Android 4.1.2的Galaxy Note 2上进行了testing。 所以不要只为元素本身定义状态 。

在CSS文件中使用下面的代码 

  * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :focus { outline: 0; border:none; color: rgba(0, 0, 0, 0); }

这对我有用。 我希望它适合你。

这不适合我的图像地图区链接，唯一的工作解决scheme是通过捕获ontouchend事件来使用JavaScript，并通过在处理程序上返回false来防止默认的浏览器行为。

与jQuery： 

 $("map area").on("touchend", function() { return false; });

我只是想分享我的经验。 我真的没有这个工作，我想避免缓慢的CSS。 我的解决scheme是下载好老埃里克迈耶的重置CSS v2.0（ http://meyerweb.com/eric/tools/css/reset/ ），并将其添加到我的phonegap项目。 然后我补充说： 

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** Disable orange highlight */

根据我的经验，这是一个更快的方法*，但它也是一个较less的怪异错误的方法。 点击突出显示，-webkit-user-modify：read-write-plaintext-only的组合以及例如文本突出显示的禁用为我们提供了许多头部。 其中最糟糕的是，突然键盘input停止工作，慢键盘可视化。

完成CSS重置并禁用橙色高亮显示： 

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

我已经试过这个，工作得很好：

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

这不仅适用于水龙头，也适用于hover： 

 button, button:hover, li:hover, a:hover , li , a , *:hover, * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }

如果devise没有使用轮廓，这应该做的工作： 

 *, *::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; } 
 <EditText android:id="@+id/edittext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background_normal" />

尝试下面的代码，禁用边框轮廓

概要：没有！重要的;

Interesting Posts