How do you make text unhighlightable?

HTML & CSS
1

As seen on here?

When you try to copy and past the text, it doesn’t work.

How do you implement that?

2

Hi there @asasass have you tried Googling your question first?

1 Like
3

Would I need to add all of these codes to it to implement it?

    -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
4

But now I’m seeing this one too, to add.


-khtml-user-select: none;
5

Maybe it’s all of these.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
1 Like
6

I have to ask why you want to do this.

Interfering with the normal functioning of the browser is likely to confuse and annoy visitors to your site.

8 Likes
7

One useful scenario that comes to mind is when implementing drag and drop functionality. You would disable select text upon dragging and re-enable it when stop dragging. @TechnoBear is correct, unless you have a legitimate scenario like the above it is best not to interfere with the expected usability of a site…

3 Likes
10

Isn’t the title of this thread misleading?

How do you make text unhighlightable?

Then you say:

So you actually want to make it highlightable, so the user can copy/paste it, right?

Or did I miss something?

11

I may be wrong, but I think it’s the opposite, @James_Hibbard

12

I think you missed something.

My understanding is that he wants to emulate that codepen, where the text cannot be highlighted, but doesn’t understand how it’s been achieved.

4 Likes
13

Thanks.

You can shoot me now.

1 Like
14

Never!

(Where would we get a new Viking-in-Chief at short notice at this time of year? )

You just need a holiday - and, fortunately, there’s one coming up.

3 Likes
15

My take is that user-select is not quite ready for prime time yet. Though maybe with vendor prefixes it’s close enough.

My initial reaction was Why would anyone ever want to do this? But I think that was because it made me think of the old no right click nonsense. Though the examples I found used text strings, I did see mention of using it to “filter out” icons so they wouldn’t get put into the clipboard. I can see where that could come in useful. I imagine if I thought about it long enough I could think of other uses where it would be helpful too, as long as it wasn’t being misused as a kind of “don’t copy my stuffs”.

2 Likes
16

I just noticed something.

Using before/after blocks the ability to right click on an image.

Meaning, you can’t view, download it.

.playButtond {
  position: relative;
  width: 266px;
  height: 200px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png")no-repeat center;
  border-radius: 50%;
  width: 170px;
}

.playButtond::after {
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.