How can I enable child inputs text selection in Mozilla Firefox using CSS?_问答_开发者

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

开发者 https://www.devze.com 2022-12-30 08:33 出处：网络

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

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.
        </textare开发者_开发技巧a>
    </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.

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.