How to make div and img unselectable

Question

I can't make that code unselectable. How can I change it?

I tried placing user-select: none in all of css classes, but it's still selectable.

<div class="outer">
    <a href="/">
        <img src="/wp-content/themes/theme/assets/img/logo.png">  
    </a>
</div>

score 0 · Answer 1 · answered Aug 09 '19 at 22:40

0

user-select is not supported in all browsers without prefix. Try this:

.outer {
  user-select: none;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
}

answered Aug 09 '19 at 22:40

Bo Peterson

41
4

Strange. It works for me. In what browser? Can you post your complete code, both css and html? – Bo Peterson Aug 13 '19 at 10:46
I made a codepen. Can you select the image? https://codepen.io/bopeterson/pen/oNvbOwa – Bo Peterson Aug 14 '19 at 10:03

score -2 · Answer 2 · answered Aug 09 '19 at 22:38

This was answered here, I can't post it in chat yet, sorry: How to make HTML Text unselectable

Long story short:

.outer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

How to make div and img unselectable

2 Answers2