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
.
Question
The question CSS rule to disable text selection highlighting shows how to prevent text selection on an element. Once you have prevented selection, how can you then allow selection for a specific child element?
For example,
<div class="no-select">
<p>some text that cannot be selected</p>
<p class="select">some text that can be selected</p>
<p>some text that cannot be selected</p>
</div>
table.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td.select {
-webkit-touch-callout: all !important;
-webkit-user-select: all !important;
-khtml-user-select: all !important;
-moz-user-select: all !important;
-ms-user-select: all !important;
user-select: all !important;
}
The .no-select
rule above works, but my attempt at a .select
rule does not. What is the correct way to do this?