How to disable text selection on double click, but not otherwise?

Question

There are tons of questions like this one and every answer I've seen is: use user-select: none. That surprises me, because disabling selection completely is in most cases very bad idea.

I want to disable selection in my HTML5 app, because I use plenty <a> elements without hrefs and when user clicks them fast enough, they get highlighted. That's bad. But I still want them to be able to select their text normally, by holding mouse button down and dragging.

Answer 1

not too sure i understand your meaning. are you trying something like this ?

Run the demo in the snippet below or in codepen DEMO

::-moz-selection {
  background: red;
}
::-webkit-selection {
  background: red;
}

::selection {
  background: red;
}
a:active::-moz-selection {
  background: transparent;
}
a:active::-webkit-selection {
  background: transparent;
}

a:active::selection , a:focus::selection{/* focus + tabindex for ie where no href*/
  background: transparent;
}
a {border:solid;}

<p>Pellentesque <a>habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</a>. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit <a tabindex="0">Internet Explorer</a>amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

??

Answer 2

I have a basic scripting solution. Check out this JSFiddle. Basically, what I've done is store and restore selectionStart and selectionEnd values based off of Javascript events. I simplified it a lot since the base version. It should work perfectly for disabling text selection on double-clicks.

There's no real way to do this in CSS that I've thought of so far.