How To Disable Text Selection On Double Click, But Not Otherwise?

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

Solution 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>

??

Solution 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.