Personalizzare Google Translator discesa

Question

Ho un sito web e in questo sito sono l'aggiunta di google traduttore in modo che la gente può vedere il sito in diverse lingue

Il codice che ho aggiunto è

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

Ora voglio per personalizzare il menu a discesa come colore di sfondo, colore del testo, la dimensione del testo e la larghezza come posso fare questo

Please Help Me

ho cercato di dare l'opacità a discesa 0 e posizionando la mia discesa sullo stesso punto in modo che funzioni allo stesso modo ma non funziona ....

Answer 1

So che questo è un vecchio post, ma sto condividendo la mia soluzione qui per altri chi, come me, aveva/avrà lo stesso problema.

Il menu a discesa è all'interno di uno iframe, quindi non sarà sufficiente specificare il proprio CSS nella pagina. Ecco come ho Styled mio traduttore di Google menu a discesa 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

PER DROPDOWN lingua LINK COLORE:

semplicemente aggiungere questo script in testa ..

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