Setting up Google Translator drop-down list

Question

I have a website and on this site I am adding a Google translator so that people can see the website in different languages

The code I added is

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

Now I want to configure drop down as background color, text color, text size and width, how can I do this

Please help me

I tried to give the drop-down opacity 0 and put my drop in the same place so that it would act the same but not work.

Answer 1

I know this is an old post, but I will share my solution here for others who, like me, had / will have the same problem.

Drop is inside the iframe , so specifying CSS on your page will not help. Here's how I described the Google Translator popup menu using jQuery:

 $('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 *") .css({ 'color': '#544F4B', 'font-family': 'tahoma' }); // Change hover effects $("iframe").contents().find(".goog-te-menu2-item div").hover(function () { $(this).css('background-color', '#F38256').find('span.text').css('color', 'white'); }, function () { $(this).css('background-color', 'white').find('span.text').css('color', '#544F4B'); }); // Change Google default blue border $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #F38256'); // Change the iframe box shadow $(".goog-te-menu-frame").css({ '-moz-box-shadow': '0 3px 8px 2px #666666', '-webkit-box-shadow': '0 3px 8px 2px #666', 'box-shadow': '0 3px 8px 2px #666' }); }); }); 

Answer 2

FOR DROPDOWN Language COMMUNICATION COLOR:

just add this script to your head.

 <script> var $jt = jQuery.noConflict(); $jt('document').ready(function () { $jt('#google_translate_element').on("click", function () { var $frame = $jt('.goog-te-menu-frame:first'); $frame.contents().find(".goog-te-menu2-item div") .css({ 'color': '#544F4B', 'font-family': 'tahoma', }).hover(function(){ $jt(this).css("background","#eeeeee"); },function(){ $jt(this).css("background",""); }); }); }); </script>