How can I enable child inputs text selection in Mozilla Firefox using CSS?
- by L. Shaydariv
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.
