android有焦点变色,android - 禁用焦点上的橙色轮廓突出显示

android - 禁用焦点上的橙色轮廓突出显示

我正在使用jQuery，jqTouch和phonegap编写应用程序，并且遇到了一个持久性问题，当用户使用软键盘上的Go按钮提交表单时会出现该问题。

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

我需要的是找到一种方法来完全禁用橙色高亮，或者让它移动到与光标相同的输入元素。

到目前为止，我已经尝试将以下内容添加到我的CSS中：

.class_id:focus {

outline: none;

}

这适用于Chrome，但不适用于模拟器或手机。 我也尝试过编辑jqTouch -webkit-focus-ring-color来阅读：

ul li input[type="text"] {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); and

-webkit-focus-ring-color: rgba(0, 0, 0, 0);

}

没有效果。我还尝试了以下-webkit-focus-ring-color文件中的每一个：

android:imeOptions="actionNone"

android:imeOptions="actionSend|flagNoEnterAction"

android:imeOptions="actionGo|flagNoEnterAction"

这些都没有任何影响。

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

outline属性仅适用于Chrome，不适用于Android浏览器。

-webkit-focus-ring-color属性确实可以在Android浏览器上运行，但不在Chrome上。 它会在焦点和点击时禁用高亮显示。

-webkit-focus-ring-color属性似乎无法在任一浏览器上运行。

15个解决方案

209 votes

尝试：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-tap-highlight-color: transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7''

Baggz answered 2019-07-19T02:16:58Z

35 votes

* {

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

}

在你的css文件中。它对我有用！

yesil answered 2019-07-19T02:17:22Z

33 votes

适用于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;

}

sergey_c answered 2019-07-19T02:17:46Z

18 votes

删除Androids输入焦点上的橙色框

textarea:focus, input:focus{

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-user-modify: read-write-plaintext-only;

}

大多数版本的tap-highlight-color

用户修改4.0.4

oori answered 2019-07-19T02:18:24Z

13 votes

尝试聚焦线

body, textarea:focus, input:focus{

outline: none;

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

}

Ravi Desai answered 2019-07-19T02:18:49Z

10 votes

请注意，使用此CSS -webkit-user-modify: read-write-plaintext-only;将删除那个可怕的突出显示'bug' - 但它可能会杀死您的设备提供特定键盘的能力。 对于我们在Samsung Tab 2上运行Android 4.0.3，我们再也无法获得数字键盘了。 甚至使用type ='number'＆amp; /或type ='tel'。 很沮丧！顺便说一句，设置点击突出显示颜色没有解决此设备和操作系统配置的此问题。 我们正在运行Safari for android。

Fivebears answered 2019-07-19T02:19:14Z

7 votes

要确保.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }属性覆盖适用于您，请首先考虑以下事项：

不工作：

-webkit-user-modify：read-write-plaintext-only;

//单击元素时，有时会触发弹出的本机键盘

.class：active，.class：focus {-webkit-tap-highlight-color：rgba(0,0,0,0);}

//如果为州定义，它不起作用

工作：

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

即使在PhongeGap应用程序中，这种情况适用于Android从v2.3到v4.x. 我在Android 2.3.3的Galaxy Y上测试了它，在Android 4.2.2的Nexus 4和Android 4.1.2的Galaxy Note 2上测试了它。 因此，不要仅为元素本身定义状态。

RynoRn answered 2019-07-19T02:20:32Z

5 votes

在CSS文件中使用以下代码

* {

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

}

:focus {

outline: 0;

border:none;

color: rgba(0, 0, 0, 0);

}

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

Kailas answered 2019-07-19T02:21:03Z

2 votes

这对我在Image Map Area链接上不起作用，唯一可行的解决方案是通过捕获ontouchend事件来使用javascript，并通过在处理程序上返回false来防止默认的浏览器行为。

用jQuery：

$("map area").on("touchend", function() {

return false;

});

Roberto Andrade answered 2019-07-19T02:21:30Z

2 votes

我只是想分享我的经验。 我没有真正开始工作，我想避免慢速css- *。 我的解决方案是下载好旧的Eric Meyer的Reset CSS v2.0([http://meyerweb.com/eric/tools/css/reset/)]并将其添加到我的phonegap项目中。 然后我补充说：

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

根据我的经验，这是一个更快的方法*，但它也是一种减少怪异错误的方法。 tap-highlight，-webkit-user-modify：read-write-plaintext-only和禁用例如文本突出显示的组合为我们提供了许多空间。 突然键盘输入停止工作和减慢键盘可视化的最糟糕的情况之一。

禁用橙色突出显示完成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;

}

Sindre answered 2019-07-19T02:22:10Z

1 votes

我试过这个并且运行良好： -

HTML： -

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

}

Ashoka Mondal answered 2019-07-19T02:22:37Z

1 votes

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

button, button:hover, li:hover, a:hover , li , a , *:hover, * {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

}

abksharma answered 2019-07-19T02:23:02Z

0 votes

如果设计不使用轮廓，这应该做的工作：

*, *::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;

}

Robert Richter answered 2019-07-19T02:23:26Z

0 votes

android:id="@+id/edittext"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@android:drawable/editbox_background_normal"

/>

Android answered 2019-07-19T02:23:44Z

-1 votes

请尝试以下禁用边框轮廓的代码

大纲：没有！重要;

rinkesh answered 2019-07-19T02:24:15Z