
Can't select text on a web page
I can't select any text on this site: https://bibilium.com/bible-verses-about-humility
What's going on here?
All Replies (6)
Just click the Toggle reader view (F9) icon in the URL bar.
When I right-click the page to call up the Inspector in the DevTools, there's an overlay that says "Don't copy text". But how are they preventing selection? Let's see... This page uses a style rule that blocks selection (bolding added by me):
<style> * { -ms-user-select: none; /* IE 10+ */ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; } input,textarea,select,option { -ms-user-select: auto; /* IE 10+ */ -moz-user-select: auto; -khtml-user-select: auto; -webkit-user-select: auto; user-select: auto; } </style>
It's annoying that browsers allow sites to completely block selecting content, but I guess it is a web standard: https://developer.mozilla.org/docs/Web/CSS/user-select
One possible workaround for this inconvenient behavior is to inject your own style rule that overrides it back to the default ("auto" instead of "none"). You can have Firefox do this automatically on every page (for the most part, some sites use slightly different approaches) this way:
(1) Install the Stylus extension from https://addons.mozilla.org/firefox/addon/styl-us/
(2) Click the Stylus "S" button on the toolbar, then click the Manage button
(3) In the left column, click the Write new style button
(4) In the code box on the right, paste this CSS:
/*** Can Select -- override anti-selection CSS ***/ /* selectors covering most sites */ html, body, body * /* selectors for stf.jusbrasil.com.br */ , .unselectable, .unselectable * { -moz-user-select: auto !important; -khtml-user-select: auto !important; -webkit-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; }
(5) In the left column, enter a title into the name box -- mine's called Can Select -- and then click the Save button
The next time you reload the problem page, you should be able to select text.
Thank you both very much for the helpful answers.
I am not looking for a workaround in this case. In fact, I wouldn't even want to visit sites which play this nasty trick on the user.
I find it very disturbing to hover over text and not see the caret (text cursor). I'm someone who habitually selects while reading. Partly to keep my place, and partly to feel a sense of connection to the page, and to know it has focus.
But habits aside, the bigger issue is that I find it very bothersome that this kind of thing is allowed to happen. It's like allowing sites to block the downloading of images. It robs the user of control and erodes the liberty we have always associated with the Web—a place where users are inherently free to copy and download anything we see to our computers.
If webmasters are so paranoid about their content being copied, they simply shouldn't put it online, or put it behind a paywall.
Firefox also supports -moz-user-select: -moz-none; and -webkit-user-select: none; apart from user-select: none; as you can see in the Inspector by the absence of the "invalid property name" warning icon.
Thank you Cor-el but I didn't understand that.
This means that overriding only the user-select property that Firefox might still use the other two property what causes the select still not working.