All geek questions in one place

User-select: all inheritance doesn't work in chrome 62

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

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

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

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

Here is the code demonstrating the problem (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>
+5
source share
2 answers

This is a problem in the Chrome browser. This error has already been reported. You can find more detailed error information with another (not working example) on this error report .

Until the error is fixed, you have the opportunity to use some JavaScript to get the behavior. See fooobar.com/questions/63756 / ....

Another 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>
+3
source

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/

0
source

Source: https://habr.com/ru/post/1272816/

More articles:


All Articles