Style Google Translate Drop-down and HIDE Google Translate Toolbar RRS feed

  • Question

  • User1278384134 posted

    Trying to customize or style the Google Translate widget? Hide the google icon? Style the text inside the language drop-down? HIDE the top-bar (toolbar) when selections are made? I spent a day searching and testing trying to get full control over the appearance and presence of this google code generated creature, and now I am sharing my code with you. I hope this helps you save some time getting a better cleaner look. 

    Wednesday, April 11, 2018 3:21 PM


  • User1278384134 posted
    <!DOCTYPE html>
    <html lang="en">
        <!-- This line adds jquery to the page, otherwise the script tags at the bottom will not run -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- Google Translate Element begin -->
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({
                    pageLanguage: 'en', includedLanguages: 'en,es,pl,pt,zh-CN,zh-TW,ar,so,ru,hy,ko,vi',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                }, 'google_translate_element');
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        <style type="text/css">
            div#google_translate_element div.goog-te-gadget-simple {
                border: none;
                background-color: transparent;
                /*background-color: #17548d;*/ /*#e3e3ff*/
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {
                text-decoration: none;
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
                color: #aaa;
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
                color: white;
            .goog-te-gadget-icon {
                display: none !important;
                /*background: url("url for the icon") 0 0 no-repeat !important;*/
            /* Remove the down arrow */
            /* when dropdown open */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {
                display: none;
            /* after clicked/touched */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {
                display: none;
            /* on page load (not yet touched or clicked) */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {
                display: none;
            /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {
                display: none;
            /* Remove span with left border line | (next to the arrow) in Edge & IE11 */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
                display: none;
            /* HIDE the google translate toolbar */
            .goog-te-banner-frame.skiptranslate {
                display: none !important;
            body {
                top: 0px !important;
        <!-- Google Translate Element end -->
    <body style="background-color: black; color: white;">
        <h3>Google Translator testing</h3>
        <div id="google_translate_element"></div>
        <p>This text is here to test the language translator.</p>
        <p>Please note that the jquery is what styles the text inside the drop down where you select languages.</p>
        <p><input type="submit" value="Button does nothing" /></p>
            $('document').ready(function () {
                $('#google_translate_element').on("click", function () {
                    // Change font family and color
                    $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div") //, .goog-te-menu2 *
                        'color': '#544F4B',
                        'background-color': '#e3e3ff',
                        'font-family': '"Open Sans",Helvetica,Arial,sans-serif'
                    // Change hover effects  #e3e3ff = white
                    $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
                        $(this).css('background-color', '#17548d').find('span.text').css('color', '#e3e3ff');
                    }, function () {
                        $(this).css('background-color', '#e3e3ff').find('span.text').css('color', '#544F4B');
                    // Change Google's default blue border
                    $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #17548d');
                    $("iframe").contents().find('.goog-te-menu2').css('background-color', '#e3e3ff');
                    // Change the iframe's box shadow
                        '-moz-box-shadow': '0 3px 8px 2px #666666',
                        '-webkit-box-shadow': '0 3px 8px 2px #666',
                        'box-shadow': '0 3px 8px 2px #666'

    See? Google may not love you, but God does!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 11, 2018 3:27 PM