6

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.

nneonneo
  • 171,345
  • 36
  • 312
  • 383

1 Answers1

8

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; 
}
Phillip Berger
  • 2,317
  • 1
  • 11
  • 30
  • 1
    Aaaah. I understand now. The element still appears to be selected (I'm using Firefox), but the text is not actually selected and nothing is copied. To disable the selection appearance I added `::-moz-selection { background: transparent; }` and `::selection { background: transparent; }` on the element. – nneonneo Mar 01 '13 at 07:31
  • Could you add the `::selection` bits to your answer? (if you don't mind) – nneonneo Mar 01 '13 at 07:34