Text of element with CSS "user-select=none" gets copied if it is located between elements

Question

Check out this snippet:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
<p>
  Selectable text.
</p>

Now triple-click on the first row and than copy. Paste it anywhere and you'll be able to see that the "Unselectable text." gets copied as well. This happens only on Chrome. Does anyone know why this is happening and what ways there are to fix it?

I tried it in Chrome, and the second row doesn't get selected — Ammar Alyousfi
– Ammar Alyousfi, Commented Nov 12, 2017 at 15:34
I can reproduce the problem in Chromium 57 under Debian 64 bit KDE, but since it doesn't happen everywhere (see @ammarx's comment) what version and system are you using? — Mr Lister
– Mr Lister, Commented Nov 12, 2017 at 15:46
By the way, IE11 also copies the second line if you select text by dragging the mouse from the first to the third line. So only Mozilla has got it right. — Mr Lister
– Mr Lister, Commented Nov 12, 2017 at 15:49
I use chrome 60 and it does happen to me, @ammarx, please notice that the second row indeed doesn't get selected, but if you copy the content from first row and paste it on your editor, you'll see that both lines got copied (line1 &line2). try to copy it by triple-click 1st line — Eshel Silberstein
– Eshel Silberstein, Commented Nov 12, 2017 at 16:03
Here, it is said that Chrome 60 supports user-select: none; — Ammar Alyousfi
– Ammar Alyousfi, Commented Nov 12, 2017 at 16:09

riv · Accepted Answer · 2018-12-07 18:51:06Z

5

This should be fixed in latest chrome, but just in case, you can use pseudo elements to add text that definitely can't get selected or copied in any browser (i.e. line numbers in code listings). Here's a trick to use it for dynamic content:

.line::before {
  content: attr(data-line-number);
  margin-right: 8px;
}

<div><span class="line" data-line-number="1"></span>line 1</div>
<div><span class="line" data-line-number="2"></span>line 2</div>
<div><span class="line" data-line-number="3"></span>line 3</div>

answered Dec 7, 2018 at 18:51

riv

7,4774 gold badges42 silver badges75 bronze badges

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

1 Comment

Selali Adobor Over a year ago

6 years later and this is still the right choice for some cases (like when you're using JS to access selected content)

Eshel Silberstein · Accepted Answer · 2017-11-12 18:43:22Z

1

If anyone interests, adding this element after the selectable element will fix the issue:

.copy-blocker
{ position: absolute; user-select: text; height: 100%; }
<div class="copy-blocker"></div>

answered Nov 12, 2017 at 18:43

Eshel Silberstein

1011 silver badge7 bronze badges

1 Comment

agrm Over a year ago

+0.5 :o) I can confirm this prevents the second paragraph from being selected and copied when you triple-click the first paragraph alone. It does not, however, prevent paragraph 2 from getting selected and copied if you manually select the whole shebang from rows 1 through 3.

Collectives™ on Stack Overflow

Text of element with CSS "user-select=none" gets copied if it is located between elements

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related