如何在双击div元素时停止高亮显示

Question

我有一个带有背景图片的div元素，我想在双击它时停止高亮它。 是否有CSS属性可以实现这一点？

这个问题可以通过CSS属性user-select来解决。将其设置为none可以防止元素被选中。

示例代码：

div {
  background-image: url('example.jpg');
  user-select: none;
}

- dave

---

你在用哪个浏览器？在我的测试中，我无法让整个div在Firefox 5、Chrome 12或IE9中高亮显示。 - tw16

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>

- tw16

---

这并没有阻止整个 div 被突出显示。我注意到它只是针对文本的。我想要在双击时防止整个 div 被突出显示。 - dave

@dave：我认为你的意思是只有在文本存在时双击才会导致高亮显示，所以我这样假设。没有必要点踩。 - tw16

在IE或Opera中无法工作。您需要使用“unselectable”属性。顺便说一下，没有“-o-user-select”。 - Tim Down

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

奇怪的是，这导致div即使在draggable = false的情况下也能在Firefox上拖动。 - rovyko

差不多已经过了十年，所以需要更新一下：现在user-select: none被相当好地支持了。 - bluenote10

Answer 2

这对我有效

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

- Hans

---

这应该是最好的答案。 - JohnA10

这只适用于像Chrome和Safari这样的WebKit浏览器，可能在任何版本的IE或Firefox中都无法使用。 - Simon East

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

- Sunil

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/）。

- SterlingVix

---

当您在iOS 13上拥有PWA时，请不要使用此CSS，因为它会完全阻止键盘。 - Fer

Answer 5

目标所有 div 元素：

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

针对所有元素：

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

- jasonleonhard

Answer 6

disable user selecting:

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

- Jin.

---

虽然这段代码可能解决了问题，但是包括一些解释可以真正帮助提高您的帖子质量。请记住，您在回答读者未来可能会遇到的问题，这些人可能不知道您建议使用该代码的原因。 - msrd0

Answer 7

如果一个元素是可点击的，你可能想把它变成一个按钮元素。

- Medda86