Prevent element from taking part in text selection

Question

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.

score 8 · Accepted Answer · 2013-03-01 07:36:57Z

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

edited Mar 1, 2013 at 7:36

answered Mar 1, 2013 at 6:58

user1781710

Sign up to request clarification or add additional context in comments.

2 Comments

nneonneo Over a year ago

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 Over a year ago

Could you add the ::selection bits to your answer? (if you don't mind)

Collectives™ on Stack Overflow

Prevent element from taking part in text selection

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related