Imagine this scenario: I have a webpage where all elements that are displayed must not be 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>
In Google Chrome, you can still select text within input and textarea, but not in Firefox. I've attempted to override this behavior with CSS using:
input, textarea {
-moz-user-select: text !important;
}
However, this does not seem to work because these tags are nested in a document body element that is already non-selectable. Is there a way to allow text selection within these nested user input elements in Firefox through CSS?
I appreciate any insights or suggestions you may have.