Can't copy text - It works in any other browser
Hello!
I often log in to a service ticketing website to help my customers. Before emailing them I must reference the service ticket number somewhere in the email, but this is very difficult to do in Firefox. If I inspect the element this is what I see:
<em unselectable="on" style="width: 2161px;">Service Ticket #55474079</em>
I understand the unselectable attribute is on but even if I try setting it to off or deleting it all together the problem remains. Moreover, I've tried it in several browsers (Chrome, Edge, DuckDuckGo) and it works fine without any extensions or tricks.
In other words: only Firefox keeps me from selecting this very important piece of info.
Any help would be very much appreciated! I looked up help articles but nothing similar to my case. I did find an extension for the browser but I am afraid to try it due to security reasons.
Thank you!
BMET1.
Endret
Valgt løsning
There is an 'easy' way to inject CSS rules in a website that doesn't require an extension and that is via userContent.css. Replace 'xxx' with the actual domain, you can add more domains:
@-moz-document domain(domain1), domain(domain2){}
@-moz-document domain(xxx){ [unselectable="on"] { user-select: text !important; } }
It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
More info about userChrome.css/userContent.css in case you are not familiar:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
All Replies (11)
em unselectable="on" style="width: 2161px;">Service Ticket #55474079
Usually an unselectable attribute or class name would be linked to a style rule which actually applies a
user-select: none;
rule (or equivalent -moz-user-select:none or -webkit-user-select:none rule). It is strange that deleting the attribute doesn't remove the corresponding style rule, but perhaps it is also linked to another selector.
It is sensible to be cautious about add-ons, particularly when you only need them on one site but they have the legacy design of being able to run on all sites.
One possible workaround would be to apply a custom style rule to the site. The simplest way is to use the Stylus add-on, which is part of the Recommended program and therefore gets closer scrutiny than most add-ons. To test whether a custom rule would work on your site, you can try this:
(1) Open the Style Editor in the lower part of the tab by pressing Shift+F7.
(2) After a few moments, the list of style sheets should appear on the left side. Click the + button above the list to create a new sheet.
(3) Paste this rule into the sheet and see whether it fixes the problem:
/*** Can Select -- override anti-selection CSS ***/ html, body, body *, div, p, td, td *, span, strong, em, b, i, .unselectable, .unselectable *, [unselectable], [unselectable] *, [unselectable="on"], [unselectable="on"] * { -moz-user-select: auto !important; -khtml-user-select: auto !important; -webkit-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; }
If that doesn't work, there might (also or instead) be a script which detects mouse motion and cancels it.
Thank you very much jscher2000, that worked!
I can select the text I need.
So the issue has to do with a CSS class like you said. Would you be able to tell me why other browsers seem to ignore it but Firefox doesn't? is there a setting I could change or a way to add the code you provided to all the web pages?
Thank you again, this issue is driving me crazy and I feel like I'm so close to fixing it.
BMET1
PD:
Before trying your suggestion I had deleted the unselectable attribute in the entire webpage, not just the tag and but it still wouldn't work. I ran a search and there were five matches.
Endret
This is possible with uBlock Origin which has a high level of trust. Add the following line to the "My filters" section, replacing the site name with your own:
example.com##[unselectable="on"]:style(user-select: text !important;)
Thank you zeroknight,
It worked! I must say however that using extensions is a bit scary since it tells you that it will need to access all of your browsing content right as you install it.
I mean, how can you ever trust it?
I wish there was a simple way to run custom code on every website but it is what it is for now.
BMET1.
Valgt løsning
There is an 'easy' way to inject CSS rules in a website that doesn't require an extension and that is via userContent.css. Replace 'xxx' with the actual domain, you can add more domains:
@-moz-document domain(domain1), domain(domain2){}
@-moz-document domain(xxx){ [unselectable="on"] { user-select: text !important; } }
It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
More info about userChrome.css/userContent.css in case you are not familiar:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Hello cor-el,
It took me a bit to get around it, but I was able to follow your instructions and inject custom css to all web pages following your post. It was very easy and anyone can do it.
At first, creating the userContent.css did nothing despite enabling it in the about:config page. Following the links you posted, I found out you also have to enable something else:
toolkit.legacyUserProfileCustomizations.stylesheets = true
I used your code and it worked fine, but in the end I elected to go with the code from jscher2000 as it was a bit more general and I didn't have to pick and choose websites. If I only wanted it for one particular website I would had gone with yours.
Thank you!
BMET1
UPDATE: I read your post again and I see you had mentioned about the toolkit.legacy value. Sorry I missed that.
Endret
To make the CSS code I posted work on all websites, you can simply omit the enclosing @-moz-document domain(xxx){} block and only keep the actual CSS code.
[unselectable="on"] { user-select: text !important; }
My rule was a bit like clear-cutting a forest to get a specific tree, but since sites vary so much, the broader rule is a good baseline for a set-it-and-forget-it approach to sites that use user-select to restrict selection.
Text selection can interfere with element dragging, so there is a good valid reason for it to be disabled in some cases. Expect to see issues on more heavily interactive sites (eg games) if you blanket override it.
jscher2000 - Support Volunteer said
/*** Can Select -- override anti-selection CSS ***/ html, body, body *, div, p, td, td *, span, strong, em, b, i, .unselectable, .unselectable *, [unselectable], [unselectable] *, [unselectable="on"], [unselectable="on"] * { -moz-user-select: auto !important; -khtml-user-select: auto !important; -webkit-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; }
Thank you very much for this. I put it in a userContent.css file and it works for all the websites and for all the local html pages, without installing any addons.