Stop highlighting of a div element when double-clicking

HTML & CSS
1

Which element in the code would I place this on?

user-select: none;

https://jsitor.com/t53KLIx4H

2

The user-select property is about selecting the text. The value none means it can’t be selected.

It has nothing to do with its display.

Are you talking about :focus?

Perhaps if you explain the issue more clearly we can help.

Css doesn’t have anything to do with double clicking?

3

There’s text on the front of the YouTube video.

When it is added to here, when I double click on the background, the YouTube screen does not get highlighted.

https://jsitor.com/t53KLIx4H

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
}

and so, I wanted to know, which div element this should be placed on?

user-select: none;

I was reading this:

How to disable text selection highlighting
https://stackoverflow.com/q/826782

I’m thinking I would do this then?

I added it to the code.

iframe{
  user-select: none;
}
4

Why not try them one by one and see which works?

1 Like
5

Why do you want to do that? Interfering with the normal functioning of the browser is likely to confuse and/or annoy anyone visiting your page.

2 Likes
6

Both of these things do the same thing I am finding.

The YouTube screen itself can’t be highlighted when I double click on the background.

Using ::selection would be the better choice?
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

https://jsfiddle.net/1sj9e63y/

iframe::selection {
  background: none;
}

https://jsfiddle.net/or01a8zf/

iframe{
  user-select: none;
}

If you change background: none; to a color, and then double click on the background.

https://jsfiddle.net/kmtv2d37/

iframe::selection {
  background: red;
}

7

Use whatever works for you best.

Note: From that page you linked to above:

Accessibility concerns

Don’t override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

1 Like
8

For what I want to do, is one code/way/method preferred over the other?

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

iframe::selection {
  background: none;
}

And
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

iframe{
  user-select: none;
}
9

I just looked at these:
https://caniuse.com/user-select-none

https://caniuse.com/css-selection

Those are the only 2 ways to do it I guess.

10

This was brought to my attention:

If I am using user-select: none;, I should also be using the vendor prefixes.

    .video-frame {
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      -os-user-select: none;
    }
11

You have forgotten what @PaulOB told you recently:

2 Likes
12

Written this way then:

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -os-user-select: none;
  user-select: none;
1 Like
13

Refer to caniuse and then make your choice based on that. It looks to me as you only need one for IE11 (which I don’t support anyway and I don’t think the rest of your code does other) and Safari. So the only one I would use would be the -webkit prefix.

I hate vendor prefixes and try to avoid them unless absolutely necessary. In your case you are doing something totally unnecessary anyway such as interfering with expected behaviour so its no great harm if a browser doesn’t support it.

2 Likes
14

Whats’s that for?

Did you just make it up?

15

typo: o for opera.

-o-user-select: none;

1 Like
16

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