User-select: all inheritance not working in chrome 62

Question

I just upgraded Google Chrome on my PC and Mac to version 62, and the CSS property user-select: all has stopped working, correctly.

If you have a parent with the user-select set to none, and a child with user-select set to all, the parent property is not overwritten correctly.

-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

Has anyone else experienced this and know if this is a bug in the new version of Google Chrome or if there is a correct way to implement this?

Here is the code demonstrating the issue (use Chrome 62 to see the problem) - JSFiddle:

div {
  margin: 5px;
}
.parent {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.child {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

<div class="parent">
  <div class="child">
    Parent has user-select set to none, Try to select this text
  </div>
</div>

<div class="child">
  No parent, Try to select this text
</div>

Answer 1

It is an issue on the Chrome browser. The bug was already reported. You can find more details about the bug with another (not working example) on this bug report.

---

Until the bug is fixed you have the possibility to use some JavaScript to get the behavior. See this answer on StackOverflow.

---

Another non JavaScript solution would be the following:

.parent :not(.selectable-all) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectable-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

<div class="parent">
  <span>user-select set to none and not selectable all.</span>
  <div class="child selectable-all">
    Parent has user-select set to none, Try to select this text
  </div>
</div>

<div class="child selectable-all">
  No parent, Try to select this text
</div>

Answer 2

I have just found a simple solution to this problem, which is as follows:

======================

In your CSS file, have the following:

.noSelect
{
  -webkit-touch-callout:none; /* iOS Safari */
  -webkit-user-select:none;   /* Chrome/Safari/Opera */
  -khtml-user-select:none;    /* Konqueror */
  -moz-user-select:none;      /* Firefox */
  -ms-user-select:none;       /* Internet Explorer/Edge */
  user-select:none;           /* Non-prefixed version */
}

.allowSelect
{
  -webkit-touch-callout:text; /* iOS Safari */
  -webkit-user-select:text;   /* Chrome/Safari/Opera */
  -khtml-user-select:text;    /* Konqueror */
  -moz-user-select:text;      /* Firefox */
  -ms-user-select:text;       /* Internet Explorer/Edge */
  user-select:text;           /* Non-prefixed version */
}

.allowSelectOneClick
{
  -webkit-touch-callout:all; /* iOS Safari */
  -webkit-user-select:all;   /* Chrome/Safari/Opera */
  -khtml-user-select:all;    /* Konqueror */
  -moz-user-select:all;      /* Firefox */
  -ms-user-select:all;       /* Internet Explorer/Edge */
  user-select:all;           /* Non-prefixed version */
}

======================

In your HTML file, you can now have the following (for example):

<div id="container1" class="noSelect">
    <div id="container2" class="noSelect">
        <div id="container3" class="noSelect">

            <div id="myTextContainer" class="allowSelect">

                <div id="myTextToBeSelectedByOneClick" class="allowSelectOneClick">
                    Hello World!
                </div>

            </div>

        </div>
    </div>
</div>

Wrapping the div of ID "myTextToBeSelectedByOneClick" (having class "allowSelectOneClick") in the div of ID "myTextContainer" (having class of "allowSelect") is the trick that makes this work.

Without the div of ID "myTextContainer", it does not work.

======================

The above is tested in Chrome Version 65.0.3325.181

Try it out here: https://jsfiddle.net/ecg3opnq/13/