Consider the following scenario. I have the following page where all displayed items should 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 text input and textarea can still be selected in Google Chrome, but the text is not selectable in Firefox. I have already tried the following:
input, textarea { -moz-user-select: text !important; }
And ... It just doesn't work, because (as far as I can see) input and textarea nested in the body element of the document, which is no longer selected. So, is it possible to enable text selection of nested user input elements in Firefox using CSS?
Thank you for your suggestions.
source share