How to Override "-Moz-User-Select: None;" on a Child Element

How do you override -moz-user-select: none; on a child element?

Try -moz-user-select: text instead of all.

As a future reference, whenever concerned about the possible values for a CSS rule, check a site like MDN.

Here is the MDN link for user-select.

Impossible to override user-select on child nodes?

try "text" instead of "normal" like:

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p, h1, h2, h3, h4, h5 {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

edit: for FireFox, i changed the line "-moz-user-select: none;" to "-moz-user-select: -moz-none;"

IE 11 - user-select override value not being applied on child elements

The Working Draft User Interface for CSS3 defined user-select like this:

This property is not inherited, but it does affect children in the
same way that display: none does, it limits it. That is if an element
is user-select: none, it doesn't matter what the user-select value
is of its children, the element's contents or it's childrens contents
cannot be selected.

Firefox implemented -moz-user-select: none according to that draft; and also implemented -moz-user-select: -moz-none, which allowed selection to be re-enabled on sub-elements using -moz-user-select: text.

However, starting with Firefox 21, -moz-user-select: none behaves like -moz-user-select: -moz-none, due to Bug 816298:

Our -moz-user-select: none behaves as proposed in the css3-userint TR
but WebKit, IE, and Opera's -XXX-user-select: none behave like
-moz-user-select: -moz-none.

Not sure if the bug is wrong and IE also followed the proposed spec, or if IE changed the behavior later. But now IE seems to be the only major browser which follows it.

However, you can't rely on that draft. The User interface for CSS3 module has been superseded by CSS Basic User Interface Module Level 3 (CSS3 UI), which doesn't include user-select.

Therefore, since user-select is no longer standard, implementators won't probably change their implementations in order to have a common behavior among different browsers.

User-select: all inheritance not working in chrome 62

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>

CSS Text Selection override for Text Box

To make text unselectable one needs to understand that there are two methods. If we need Opera and Internet Explorer prior to version 10 (which is in most of the cases positive)) ) - we need to use the unselectable attribute with the value of on.

What is important to notice here that if we set this attribute to the parent wrapper - .Non-Select in this case - the child-elements' text can still be selected - open this fiddle in opera or IE up to 9 to check. So we need to add this attribute to every single element that should not be selected (possibly dynamically via javascript if there are many (or unknown number) of possible child elements).

To disable other browsers' selection we may use the css3 user-select property. A cool way of adding this css will be via attribute selector like so:

[unselectable="on"]{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

Thus - the text on any element with this attribute cannot be selected in most of the popular browsers.

The second way is shorter. If we don't need IE or Opera - your code must undergo a small change for it to work in Firefox, Chrome and IE10.

.Non-Select {
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none; 
}
.Non-Select input {
    -webkit-user-select: text;
    -khtml-user-select: text; 
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text; 
}

Pay attention to the non-standart -moz-none value I added. If we read carefully about this property on MDN we will see that Mozilla introduced this non-standart version to enable selection of child elements. A live example of the second method can be seen here: - http://jsfiddle.net/jxnEb/5/

Edit: There has been a similar question on selection. Pay attention to the accepted answer where the author wrote a function to add the unselectable attribute recursively to all the child-elements. (in your case - input should be filtered of course).