If in CSS, "user-select: none
" is not working for you, then you could try the following:
If none of these help, then you might want to check for browser-specific issues. For example, due to a bug in Chrome v62, user-select
might not work as expected. In such cases, you could, perhaps, use a JavaScript polyfill instead.
Check Browser Compatibility
If the CSS user-select
property is not working for you, then you might want to check if the browsers you're supporting, actually support user-select: none
.
Some browsers might require a vendor-specific prefix to make the user-select
property work. Therefore, based on the browsers you wish to support, make sure that you have added the necessary vendor prefixes, for example, like so:
.no-select { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari, Chrome, Opera, Samsung */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Edge, IE */ user-select: none; /* Modern browsers */ }
Check Child's user-select
Value
If a child element does not have a user-select
property set explicitly, then it would default to user-select: auto
, which would determine the value for the child in the following way:
- On
::before
and::after
pseudo elements, the used value isnone
; - On editable elements, the used value is
contain
; - If parent is set to either
all
ornone
, then the child uses the same value as the parent; - If none of the above is true, then the used value is
text
.
If this is the source of your issue, then you can explicitly set the user-select
property on the child element, for example, like so:
<div class="parent"> <p class="child">This text is not selectable.</p> </div>
.parent { user-select: all; } .child { user-select: none; }
In this case, the <div>
element (and its contents) will be selectable, except for the <p>
element because its user-select
property is set to none
.
Conversely, it could also be that the child element already has an explicit value set for the user-select
property, which could be causing it to behave differently than the parent (for example, when you are expecting it to inherit none
from the parent).
Disable pointer-events
You could try setting pointer-events: none
on the element to disable all pointer events on it. This would prevent the user from interacting with the element in any way (including, clicking on it or selecting its contents). For example:
<div class="no-select"> <p>This text is not selectable.</p> </div>
.no-select { user-select: none; pointer-events: none; }
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.