取消焦点时的橙色轮廓突出显示

Question

我正在使用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. outline属性仅在Chrome浏览器上有效，而不在Android浏览器上。

2. -webkit-tap-highlight-color属性实际上在Android浏览器上起作用，但在Chrome浏览器上不起作用。它禁用了聚焦和点击时的突出显示。

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

- eggdeng

Answer 1

尝试：

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

- Baggz

---

这个在Android 4.0.4上不能正常工作 - 有人也有同样的经历吗？（在之前的版本和4.1上可以工作） - 最白目

Android 4.0.4 可与以下代码配合使用： -webkit-user-modify: read-write-plaintext-only; 该代码用于在网页中限制用户输入框只能输入纯文本内容，并且允许读写操作。 - oori

@oori，好的吗？这并没有解决我的评论所涉及的非输入和非文本区域元素的问题。 - Max

• { -webkit-user-modify: read-only; } 在安卓设备上对于非文本域元素有效。

- Matt Woelk

@Max 我也遇到了同样的问题，你有什么解决方法吗？如果有，请分享一下。 - Piyush Agarwal

Answer 2

工作于Android Default、Android Chrome和iOS Safari，百分之百兼容。

* {
    -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

---

这是所选答案 - mlg87

如果您的问题是关于按钮，您可以直接使用 button 而不是使用 *。 - Brian Burns

Answer 3

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

在你的 CSS 文件中。 这对我有用！

- yesil

Answer 4

移除Android设备输入框获取焦点时出现的橙色边框

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

tap-highlight-color 适用于大多数版本

user-modify 适用于4.0.4版本

- oori

---

一直在寻找 [Android 4.1.2] 的解决方案，已经几天了。这是唯一有效的方法。非常感谢！ - cassi.lup

@Ben 上面的答案肯定是有效的...请使用plunkr/jsfiddle制作您的代码，这样我们就可以看到并协助您。 - oori

@Ben，针对4.0.4版本的user-modify不是一个好的解决方案，如果你有其他的解决方案，请分享一下。 - Amit

Answer 5

尝试使用聚焦线

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

- Ravi Desai

---

仅适用于 Android 4.2 设备和类似设备的工作解决方案。 - andreszs

Answer 6

请注意，使用此CSS属性 -webkit-user-modify: read-write-plaintext-only; 可以解决烦人的高亮“错误” - 但它可能会导致设备无法提供特定的键盘。对于我们在三星平板电脑上运行Android 4.0.3的用户来说，我们无法再获得数字键盘，即使使用type ='number'和/或type ='tel'也是如此。非常令人沮丧！ 另外，设置触摸高亮颜色对于这种设备和操作系统配置无法解决此问题。我们正在运行适用于Android的Safari。

- Fivebears

---

你如何在安卓设备上运行Safari。 - Amit

嘿@Amit，自从我回答这个问题以来已经很久了！我想说它只是按照出厂标准直接从设备上运行...当时Tab2在市场上还很新。 - Fivebears

Answer 7

请在CSS文件中使用以下代码。

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

对我有用，希望对你也有用。

- Kailas

Answer 8

为确保tap-highlight-color属性的覆盖效果，首先考虑以下几点：

不起作用：
-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); }

此方法适用于Android v2.3到v4.x甚至适用于PhongeGap应用程序。我已在装有Android 2.3.3的Galaxy Y、Android 4.2.2的Nexus 4和Android 4.1.2的Galaxy Note 2上进行了测试。所以不要仅为元素本身而定义它的状态。

- laszlo-horvath

---

这个技巧是让我在Android 2.3上使用WebView的关键。 - dAngelov

哇塞！这个可行了！！（Android 4.1.2）该死！我讨厌WebView的碎片化！！ - Someone Somewhere

Answer 9

这在Ionic中对我有效，只需将其放入CSS文件以覆盖即可。最初的回答。

:focus {
    outline-width: 0px;
}

- Snowbases

Answer 10

我想分享我的经验。我并没有真正让这个工作，我也想避免缓慢的 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