How to Fix Issues With CSS "user-select: none" Not Working?

If in CSS, "user-select: none" is not working for you, then you could try the following:

1. Check Browser Compatibility;
2. Check Child's user-select Value;
3. Disable pointer-events.

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 is none;
• On editable elements, the used value is contain;
• If parent is set to either all or none, 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;
}