"user-select: none" and strange behaviour in Firefox

Question

I am trying to prevent text highlighting in Firefox for some, but not all elements on the page. Consider the following:

<div style="-moz-user-select: none;">
I cannot be highlighted
    <div  style="-moz-user-select: text;">
    I should be highlightable, but am not.
    </div>
</div>

As I understand it, using the above css rules, the text of the inner div should be highlightable. However this does not appear to work. In practice none of the text can be highlighted.

I am wondering if I am doing something wrong? If not, does anyone know of a workaround for this situation?

Thanks!

ps I should add that using the alternate...

-webkit-user-select: none;

...in the above example works just fine in webkit browsers

Answer 1

Replace

<div style="-moz-user-select: none;">

with

<div style="-moz-user-select: -moz-none;">

The description of the -moz-user-select property states that -moz-none means that the text of the element and sub-elements cannot be selected, but selection can be enabled on sub-elements using -moz-user-select: text;

Answer 2

Mozilla informs the following about the none property :

The text of the element and sub-elements will appear as if they cannot be selected. Any use of Selection however will contain these elements.

Read -moz-user-select.