Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Let's 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.

like image 695
Lyubomyr Shaydariv Avatar asked Dec 22 '22 03:12

Lyubomyr Shaydariv


1 Answers

Does:

    body {
        -webkit-user-select: none;
        -moz-user-select: -moz-none; /* changed from none to -moz-none */
    }
    input, textarea {
        -moz-user-select: text;
    }

work?

See this page.

like image 145
Salman A Avatar answered Jan 17 '23 14:01

Salman A