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

91

我的这个div元素带有背景图片，并且双击它时我想停止在div元素上突出显示。是否有CSS属性？

— 戴夫
source

您正在使用什么浏览器？在我的测试中，我无法在Firefox 5，Chrome 12或IE9中突出显示整个div。

— 2011年

154

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

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

要向下定位IE9和Opera，unselectable必须改用html属性：

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

— tw16
source

但这并不能阻止整个div突出显示。我注意到这仅用于文本。我想防止整个div双击时突出显示。

— 戴夫

@dave：我认为，双击引起突出显示的唯一时间是当其中包含您想要的文字时。无需投票。

— 2011年

1

在IE或Opera中不起作用。您需要该unselectable属性。-o-user-select顺便说一句，没有。

— 蒂姆·唐

SASS / SCSS用户注意事项：您可以@include user-select(none);代替使用原始CSS

— hilnius19年

奇怪的是，这导致div即使在draggable = false上也变得可拖动，但仅在Firefox上可用。

— 罗维科

51

这对我有用

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

— 汉斯
source

这应该是最好的答案。

— JohnA10 '16

11

这仅与Webkit浏览器（例如Chrome和Safari）相关，并且可能不适用于任何版本的IE或Firefox。

— 西蒙·伊斯特

30

我试图找到一种在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

— 苏尼尔
source

8

我不是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/）。

— SterlingVix
source

如果您在iOS 13上安装了PWA，则永远不要使用此CSS，因为这样会完全阻塞键盘。

— 费尔

2

定位所有div元素：

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

定位所有元素：

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

— 杰森·莱昂哈德
source

1

禁用用户选择：

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

— 斤。
source

3

尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。

— msrd0 2015年

0

如果元素是可单击的，则可能需要使其成为按钮元素。

— Medda86
source