单击时删除html图像上的蓝色突出显示答案

【问题标题】：Remove blue highlight over html image when clicked单击时删除html图像上的蓝色突出显示
【发布时间】：2013-05-08 04:52:52
【问题描述】：

我正在 Android 中制作自定义应用程序。我在 div 中显示带有 img 标签的 html 页面。

<div class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</div>

在我正在编写的 javascript 中：

$(".press").bind("click",function()    
{
//display something
});

当我点击图片时，点击正常，但图片被蓝色覆盖层包围。

Image 1

Image 2 when image clicked

我不明白如何删除它。我尝试了很多方法，但没有一个答案有效。请帮忙。谢谢

【问题讨论】：

Prevent the default blue selection on click的可能重复
嘿 ryan ...该帖子中的解决方案对我不起作用...

标签： jquery html

【解决方案1】：

您可以通过 css 防止在您的页面上进行选择。您可以将 * 选择器更改为您想要阻止选择的元素选择器。

/*IE9*/
*::selection 
{
    background-color:transparent;
} 
*::-moz-selection
{
    background-color:transparent;
}
*
{        
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    /*IE10*/
    -ms-user-select: none;
    user-select: none;

    /*You just need this if you are only concerned with android and not desktop browsers.*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}    
input[type="text"], textarea, [contenteditable]
{

    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

【讨论】：

你能为它创建一个 jsfiddle 吗？
-webkit-tap-highlight-color 正是我想要的！非常感谢！！

【解决方案2】：

试试这个：

CSS

.press, img, .press:focus, img:focus{
    outline: 0 !important;
    border:0 none !important;
}

【讨论】：

现在试试上面我做的修改。
我仍然收到同样的错误 Rohan。我实际上正在使用带有增强现实应用程序的 android 平台，该应用程序在相机顶部显示浏览器。
hi rohan 感谢您的支持，但错误仍然存在，我在图像周围得到了一个新的黑色背景..

【解决方案3】：

你可以使用 CSS：

** HTML **

<button class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</button>

** CSS **

.press{
    outline-width: 0;
}

.press:focus{
    outline: none;
}

从这里回答：How to remove the border highlight on an input text element

【讨论】：

【解决方案4】：

它可能是包含按钮的 div 上的背景颜色或边框颜色。别的完全点击后使用如下代码删除css

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

【讨论】：