如何从谷歌翻译中删除或隐藏由文本提供支持

Question

Is it possible to hide or remove the Powered by Google Translate on the dropdown in Google Translate?

I have removed the logo part, but couldn't remove the Powered by text.

Here's the code:

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

You can add these lines of code in your CSS file:

.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget{
    color: transparent !important;
}

Answer 2

This CSS worked for me:

.goog-logo-link {
   display:none !important;
}

.goog-te-gadget {
   color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
   color: blue !important;
}

Answer 3

Although, previous answers regarding display: none and color: transparent may work. I use this solution to completely erase text from html , if you want lets say style the box itself.

$(window).load(function(){
    $(".goog-logo-link").empty();
    $('.goog-te-gadget').html($('.goog-te-gadget').children());
})

I use jQuery in this example, however you can switch to JavaScript if you want.

Answer 4

Add the css to your stylesheet

#google_translate_element {
  color: transparent;
}
#google_translate_element a {
  display: none;
}

The first line will hide the text and the second line will hide the google translate logo.

Test it in all browsers to make sure you do not hide make the dropdown text transparent. If so, add this:

select.google_translate_element {
  color: black;
}

to remove the "Powered by" text

div.goog-te-gadget {
  color: transparent !important;
}

Note: I am not sure whether it is within the terms and conditions of use that you are allowed to hide the Google logo, but this should work.

Answer 5

If you decrease the height and hide the overflow, you will hide this area on the screen. Maybe not a very good solution, but it can be a good alternative.

<style> 
    #google_translate_element { height: 26px !important; overflow: hidden !important; }
</style>

You can try using this link. => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate

Answer 6

I am using following to remove google poweredby link or image

#google_translate_element img
        {
            display: none !important;
        }

Try this to remove logo from language translator i am sure

Answer 7

$(window).load(function () {
  $(".goog-logo-link").parent().remove();
  $(".goog-te-gadget").html(
    $(".goog-te-gadget").html().replace('  Powered by ', '')
  );
});

Answer 8

.goog-te-gadget {line-height: 2px !important;color: transparent;}

Answer 9

Simply add this..

.goog-logo-link {display:none !important; } 
.goog-te-gadget {font-size:0px !important;}

Answer 10

Review image OR To remove powered by TEXT in Google Translate api, You can simply add this css.

.goog-te-gadget {
    font-size: 0px;
}

Answer 11

Tried the code above and it did work to hide the "Powered by", but it did remove the not the Google Translate section. What I did and it worked was add below code to the google-language-translators style.css in the css folder within the plugin.

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
    color: #444;
    **display: none;**
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

See Plugin active on http://sethucurryhouse.com/