Search code examples
javascriptcssfirefoxformattingstylesheet

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

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

Solution

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