如何在双击时停止突出显示 div 元素

Question

我有一个带有背景图像的 div 元素，我想在双击它时停止在 div 元素上突出显示。有 CSS 属性吗？

Answer 1

下面的 CSS 阻止用户选择文本。实例：http://jsfiddle.net/hGTwu/20/

/* If you want to implement it in very old browser-versions */
-webkit-user-select: none; /* Chrome/Safari */ 
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* The rule below is not implemented in browsers yet */
-o-user-select: none;

/* The rule below is implemented in most browsers by now */
user-select: none;

向下定位 IE9 并运行 Opera必须使用 HTML 属性 unselectable 来代替：

<div unselectable="on">Test Text</div>

Answer 2

这对我有用

html
{
  -webkit-tap-highlight-color:transparent;
}

Answer 3

我试图找到一种解决方案来阻止 Chrome 中的 div 突出显示，并转向了这篇文章。
但不幸的是，所有答案都没有解决我的问题。

经过大量在线研究后，我发现修复非常简单。不需要任何复杂的 CSS。只需将以下 CSS 添加到您的网页即可。这适用于笔记本电脑和移动屏幕。

div { outline-style:none;}

注意：这适用于 Chrome 版本 44.0.2403.155 m。此外，当今所有主要浏览器都支持它，如以下网址所述： https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Answer 4

我不是 CSS 专家，但我认为只要扩大受影响的元素数量，您就可以使用 tw16 的答案。例如，这可以防止在我的页面上的任何地方突出显示，而不影响任何其他类型的交互性：

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

第一行由 Paul Irish 提供（来自 http://adamschwartz.co/magic-of-css/chapters/1-the-box/）。

Answer 5

定位所有 div 元素：

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

定位所有元素：

::-moz-selection { background:transparent; }
::selection { background:transparent; }

Answer 6

禁用用户选择：

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

为所选元素设置背景透明：

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Answer 7

如果某个元素是可点击的，您可能希望将其设为按钮元素。