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


106

我正在使用jQuery,jqTouch和phonegap编写应用程序的代码,遇到了一个持久性问题,当用户使用软键盘上的“转到”按钮提交表单时,就会出现该问题。

尽管通过使用可以很容易地将光标移动到适当的表单输入元素$('#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属性似乎在两种浏览器上均不起作用。

Answers:


210

尝试:

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

10
它不适用于android 4.0.4-有人经历过吗?(适用于以前的版本和4.1)
最白目

6
android 4.0.4适用于:-webkit-user-modify:读写纯文本;
oori 2012年

@oori确实可以,但是通过导致键盘弹出来“破坏” iOS。
2012年

@Max,您的评论不清楚。在iOS上-当然,一旦您专注于输入/文本区域,键盘就会弹出。.请解释
oori 2012年

4
@oori好吗?这对非输入非文本区域元素无济于事,这是我评论的主题。
最多

43

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

1
这应该是所选的答案
mlg87 '19

如果您的问题是例如按钮,则*可以使用代替使用button
Brian Burns

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

在您的css文件中。它对我有用!


18

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

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


几天来一直在寻找修复程序[Android 4.1.2]。这是唯一有效的方法。非常感谢你!
cassi.lup 2014年

@Ben上面的答案肯定可以正常工作...用您的代码创建一个plunkr / jsfiddle,以便我们可以看到并为您提供帮助。
oori 2014年

@Ben user-modify for 4.0.4不是一个好的解决方案,如果您有其他解决方案,请与他人分享。
阿米特(Amit)2015年

12

尝试聚焦线

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

仅适用于Android 4.2设备及类似设备的解决方案。
andreszs

10

请注意,使用此CSS会-webkit-user-modify: read-write-plaintext-only;删除该可怕的突出显示的“错误”,但它可能会杀死您的设备提供特定键盘的能力。对于在Samsung Tab 2上运行Android 4.0.3的我们,我们将不再能获得数字键盘。即使使用type ='number'和/或type ='tel'。很沮丧!顺便说一句,设置点击突出显示颜色无法解决此设备和OS配置的此问题。我们正在运行Safari for android。


您如何运行Safari for Android。
阿米特(Amit)2015年

嘿@Amit,自从我回答这个问题以来已经很久了!它只是以设备的出厂标准运行,我会说... Tab2当时在市场上还很新。
Fivebears 2015年

7

为确保tap-highlight-color属性覆盖对您有效,请首先考虑以下事项:


无法正常工作: -webkit-user-modify:只读-写入-纯文本;
//有时会在单击元素时触发本机键盘弹出

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

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

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


1
这是使它对Android 2.3上的WebView起作用的原因。
dAngelov

WOOOOW这个工作了!!(Android 4.1.2)天哪!我讨厌webview碎片化!
某处某人2014年

6

在CSS文件中使用以下代码

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

对我来说有用。希望它对您有用。


2

这对我在“图像地图区域”链接上不起作用,唯一可行的解​​决方案是通过捕获ontouchend事件并通过在处理程序上返回false来防止默认浏览器行为来使用javascript。

使用jQuery:

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

2

我只是想分享我的经验。我没有真正使它起作用,我想避免使用缓慢的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的组合:仅可读写纯文本和禁用例如文本突出显示为我们提供了很多便利。最糟糕的情况之一是键盘输入突然停止工作,并且键盘可视化速度变慢。

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

1

我已经尝试过这个并且工作良好:-

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

-webkit-tap-highlight-color:透明;->很好,解决了Nexus5(Chrome)和Kindle Fire HD 7''。所有其他选项均不适用于这些设备/浏览器。请注意,Firefox和Opera不需要Nexus5上的线。
Michael Biermann 2014年

1

这不仅适用于水龙头,也适用于悬停:

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

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

 />

0

在Ionic中对我有用,只是放在CSS文件中以覆盖

:focus {
    outline-width: 0px;
}

-1

如果设计不使用轮廓,则应完成以下工作:

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

-1

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

大纲:无重要!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.