How can I enable child inputs text selection in Mozilla Firefox using CSS?

Posted by L. Shaydariv on Stack Overflow See other posts from Stack Overflow or by L. Shaydariv
Published on 2010-05-11T09:35:35Z Indexed on 2010/05/11 9:44 UTC
Read the original article Hit count: 324

Filed under:
|
|
|
|

Hi.

Let consider the following scenario. I have the following page where all rendered elements must be non-selectable.

<html>
<head>
    <style type="text/css">
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
        }
        div {
            border: solid 1px green;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
        vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
    </div>
    <div>
        <input type="text" value="You can select the text from me" />
        <textarea>
            And me too.
        </textarea>
    </div>
</body>
</html>

The input and textarea text is still selectable in Google Chrome, but the text is not selectable in Firefox. I've already tried the following:

input, textarea {
    -moz-user-select: text !important;
}

And... It simply doesn't work because (as far as I can see) input and textarea are nested in the document body element that's already is not selectable. So, is it possible to enable text selection of the nested user input elements in Firefox using CSS?

Thank you for suggestions.

© Stack Overflow or respective owner

Related posts about css

Related posts about gecko