Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu September 25, 2023 › #css #GoogleTranslate

How to customize google translate button using css

Want to know how you can customize the google translate button using css. In this article, I'm going to teach you how to customize the Google Translate Button .

In the previous article, I discussed how to add the Google Translate Button on your Website/Blog.

how to customize google translate button using css Using all codes together [updated] #
<style type="text/css">
   .fixed-con {
    z-index: 9724790009779558!important;
    background-color: #f7f8fc;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }
  .VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
   z-index: 9724790009779!important;
   top:0;
   left:unset;
   right:-5px;
   display:none!important;
   border-radius:50%;
   border:2px solid gold;
  }
  .VIpgJd-ZVi9od-aZ2wEe-OiiCO{
    width:80px;
    height:80px;
  }
</style>
Try it Yourself »

Customize Google Translate Select/Button/Dropdown

how to customize google translator button using css

To customize google translate button/select, use the id #google_translate_element. Then the select tag to customize select option.

Customize Dropdown

#google_translate_element select{
   background-color:#f6edfd;
   color:#383ffa;
   border: none;
   border-radius:3px;
   padding:6px 8px
 }
Try it Yourself »

Remove Google Translate Logo/text/copyright/link.

how to Remove google translator Logo/text/copyright/link

Use the class name .goog-te-gadget to remove google translate logo/copyright , link or powered by google translate text.

Customize Logo
 .goog-logo-link{
    display:none !important;
   }
 .goog-te-gadget{
  color:transparent!important;
  }
Try it Yourself »
If we use display:none; property using css to hide the copyright,then the google translate button also will not display. So we changed the color of the text.

Remove Google Translate banner-frame/iframe from the top of a web page.

how to Remove google translator iframe from the top of a web page

To remove google translate banner-frame/pop up,use the class .goog-te-banner-frame

Remove Banner-frame
.goog-te-banner-frame{
 display:none !important;
 }
Try it Yourself »

How to disable google translate original text tooltips

How to disable google translate original text tooltips
Disable text tooltips
#goog-gt-tt, .goog-te-balloon-frame
{
display: none !important;
}
.goog-text-highlight 
{ 
background: none !important;
box-shadow: none !important;
}
Try it Yourself »

How to add custom language.

If you don't want to show the all languages provided by Google Translate,then you can easily add custom languages that you want to show by using includedLanguages

Google Translate Custom Language
includedLanguages:'hi,en,bn,id,fr',
Try it Yourself »

Duplicate Questions

  1. customize translate
  2. google translate html code
  3. Can you style the google translate button ?
  4. Google Translate Custom Styling
  5. Implementing Google Translate with custom flag icons
  6. Custom Google translate drop down
  7. CodePen Embed - Google Translate Custom Styling
  8. Customize Google Translate
  9. Custom Google Translate Dropdown
  10. how to customize google translator
  11. how to remove logo /link /copyright from Google translate button.
  12. how to remove Google translate banner-frame using css and javascript
  13. How do I add Google translate to my HTML?
  14. How do I add multiple languages to my website?
  15. How do I automatically translate a Web page?
save
listen
AI Answer
8 Answers
Write Your Answer
  1. https://2.bp.blogspot.com/-DB2iLfmtX-w/YL3ofA4agwI/AAAAAAAABoc/QYBHM5qY0KgwMAyEfPq8KcUeIbQV2-bAgCK4BGAYYCw/s1600/How_to_disable_google_translate_original_text_tooltips.jpg

    When you select translated content, a background color and box-shadow are added automatically. Use this code to customise the tooltip .

    .goog-tooltip {
    display: none !important;
    }
    .goog-tooltip:hover {
    display: none !important;
    }
    .goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    }
    • Hide the tooltip box of the Google translate with the id #goog-gt-tt.
      #goog-gt-tt, .goog-te-balloon-frame{display: none !important;}
      .goog-text-highlight { background: none !important; box-shadow: none !important;}
    Reply Delete
    Share
    Reply Delete
    Share
  2. how to change the text "Select Language" with what we want
    • Apu
      We can also change "Select Language" text of the Google Translate button by using the simple button of the Google translate. As you know there are three types of button. Simple button is one of them. First we need to hide the default text of the button using the below selector. 
      .goog-te-menu-value spanThen, we will set value using the css pseudo class :before
      Here is the live demo.
    • How do you hide the default text using the below selector ? You don't specify
    • Apu
      It's easy. You just have to do is change the font size of the button using the above selector.
      <style>
      .goog-te-gadget-simple{
          background-color:transparent;
          border:2px solid #eee;
          border-radius:5px;
          padding:5px 10px;
          box-shadow:0 2px 10px -7pxrgba(0,0,0,0.2);
          font-size:0px;
      }
      .goog-te-gadget-simple:before{
            content:'Translator';
            font-size:12px;
      }
      </style>
    Reply Delete
    Share
    Reply Delete
    Share
  3. How to remove that select menu and use image translate?
    Reply Delete
    Share
  4. Banner frame not removed now. Check and update the code.
    Reply Delete
    Share
loading
back
View All