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

小开

最佳答案

The CSS below stops users from being able to select text. Live example: 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;

To target IE9 downwards and Opera the HTML attribute unselectable must be used instead:

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

小开

This works for me

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

小开

I'm no CSS expert, but I think you can use tw16's answer as long as you expand the number of elements affected. For instance, this prevents highlighting everywhere on my page without affecting any other kind of interactivity:

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

That first line is courtesy of Paul Irish (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/).

小开

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

set background transparent for selected element:

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

小开

I was trying to find a solution to stopping div highlighting in Chrome, and turned to this post. But, unfortunately, none of the answers solved my problem.

After a lot of online research, I found that the fix is something very simple. There is no need for any complex CSS. Just add the following CSS to your web page and you are all set. This works in laptops as well as mobile screens.

div { outline-style:none;}

NOTE: This worked in Chrome Version 44.0.2403.155 m. Also, it is supported in all major browsers of today as explained at this url: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

小开

Target all div elements:

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

Target all elements:

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

小开

If an element is clickable, you might want to make it a button element.