Search code examples
htmlcsstextselection

Prevent element from taking part in text selection

I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?

I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).

unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.

Solution

  • Give the element you want to prevent selection of an id.

    Then put this in your CSS:

    #id-name {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
::-moz-selection {
   background: transparent;
}
::selection { 
   background: transparent; 
}