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

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属性似乎不适用于任何一种浏览器.

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''

Answer 2

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

Answer 3

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

在你的css文件中.它对我有用!

Answer 4

删除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

Answer 5

尝试聚焦线

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

Answer 6

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

Answer 7

要确保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); }

即使在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上测试了它.因此,不要仅为元素本身定义状态.

Answer 8

在CSS文件中使用以下代码

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

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