Personalización de Google Translator desplegable

Question

Tengo un sitio web y en este sitio web estoy añadiendo el traductor de google para que las personas puedan ver el sitio web en diferentes idiomas

El código que he añadido es

<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> 

Ahora quiero para personalizar el menú desplegable como el color de fondo, color de texto, el tamaño del texto y el ancho de cómo puedo hacer esto

Ayúdeme por favor

traté de dar la opacidad desplegable 0 y colocar mi menú desplegable en el mismo lugar para que actúe igual pero no funciona ...

Answer 1

Sé que esta es una publicación anterior, pero estoy compartiendo mi solución aquí para otros quien, como yo, tuvo/tendrá el mismo problema.

El menú desplegable está dentro de iframe, por lo que especificar su CSS en su página por sí solo no ayudará. Así es como yo LABRÓ mi Google Traductor menú desplegable con 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's default blue border 
     $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #F38256'); 

     // Change the iframe's 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

PARA desplegable de idiomas ENLACE DE COLOR:

simplemente añadir este script en la cabeza ..

<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>