Disabling Google-Translate Icon On Selected Text

Posted at

Officially all you have to do is include HTML5 annotation on the containers that should not support the Google-Translate action: translate="no", but apparently if the user has installed the official extension (Firefox or Chrome), there will still be a floating button shown above the selected text,
the old-school class="notranslate" alternative won't do much either.

if you are a web-developer, you may try to catch the objects created, but a simpler solution will be just to hide the button (which includes two elements) that might break the page's structure (especially if you've done some protection against text-copying or selecting the content).

just include the following style tag just before the </body>:
<style>*[id^="gtx-trans"],*[class^="gtx-trans"]{height:1px; width:1px !important; visibility:hidden !important; display:none !important; content:'' !important}</style>

if you think its too excessive, feel free to thin-it-down by keeping the display:none for both of the # and . rules. Leave the !important in, since the injected JavaScript is overriding adding a stylesheet that will override the rules, unless the !important annotation will be supplied..