How to stop highlighting of a div element when double-clicking

问题

I have this div element with a background image and I want to stop highlighting on the div element when double-clicking it. Is there a CSS property for this?

回答1:

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

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

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

回答2:

This works for me

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

回答3:

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: http://www.w3schools.com/cssref/pr_outline-style.asp

回答4:

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/).

回答5:

Target all div elements:

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

Target all elements:

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

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

set background transparent for selected element:

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

来源：https://stackoverflow.com/questions/7018324/how-to-stop-highlighting-of-a-div-element-when-double-clicking

标签

css

xhtml