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>

Probably it's a bug in browser. I'm able to select that text with Ctrl + A - on Windows - but not through mouse-drag. — Nisarg Shah, Oct 23 '17 at 07:28

Sebastian Brosch · Accepted Answer · 2017-10-23T07:47:29.900

6

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>

edited Oct 23 '17 at 07:47

answered Oct 23 '17 at 07:34

Sebastian Brosch

42,106
15
72
87

do you know how I can get this to work on all descendants? As you can see in this fiddle it doesn't work: https://jsfiddle.net/txdhez7k/1/ TIA – Ronny vdb Oct 31 '17 at 10:03
like this? - https://jsfiddle.net/sebastianbrosch/txdhez7k/2/ - if not describe your problem more detailed. – Sebastian Brosch Oct 31 '17 at 11:32
Sorry if I was not clear, no that solution doesn't work. In my site I have the user-select: none set on the body, then I want all descendants that have the class ".selectable-all" to be selectable. the solution you posted only works on direct children, I am looking for a solution that will work on any descendant of the body – Ronny vdb Oct 31 '17 at 11:40
Unfortunately, this doesn't work without specifying a specific parent element because of inheritance. So if you want to turn it off ubiquitously and then turn it on for one element with the `all` property, you're out of luck. – JackHasaKeyboard Dec 09 '17 at 23:46

Hoppy Spadge · Answer 2 · 2018-04-18T15:48:35.070

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/

score 0 · Answer 3 · answered Oct 23 '17 at 07:32

0

Try changing user-select:all to user-select:text

CSS:

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;
}

Demo: https://jsfiddle.net/lotusgodkk/12jfpzys/2/

answered Oct 23 '17 at 07:32

K K

17,794
4
30
39

Select text is not a good solution, because I want to provide the user the option to select the entire field on one click, select text requires the user to click 2 or 3 times to select all the text – Ronny vdb Oct 23 '17 at 08:37

score 0 · Answer 4 · answered May 23 '18 at 13:54

0

Make sure none of your children has: all: none which resets all properties, as I did. If that's the case below all: none just add user-select: none (Chrome).

answered May 23 '18 at 13:54

Daniel Kmak

18,164
7
66
89

User-select: all inheritance not working in chrome 62

4 Answers4

Linked