Customizing Google Translator Dropdown

Question

Ich habe eine Website und die auf dieser Website sind Hinzufügen Übersetzer Google so, dass die Menschen Webseite in verschiedenen Sprachen

Der Code, den ich hinzugefügt habe, ist

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

Jetzt wollen sehen i das Drop-down wie Hintergrundfarbe, Textfarbe, Textgröße anpassen und Breite, wie kann ich dieses

tun Helfen Sie mir bitte

ich habe versucht, zu geben die Drop-down-Opazität 0 und mein Dropdown auf der gleichen Stelle platzieren, so dass sie gleiche wirkt aber seine nicht funktioniert ....

Answer 1

Ich weiß, dass dies eine alte Post, aber ich meine Lösung hier für andere teilen Wer, wie ich, hatte/wird das gleiche Problem haben.

Die Drop-Down befindet sich in einer iframe Angabe so seine CSS allein auf Ihrer Seite wird nicht helfen. Hier ist, wie ich gestylt mein Google Translator Drop-Down-Menü mit 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

FÜR DROPDOWN Sprache LINK FARBE:

einfach hinzufügen, um dieses Skript in den Kopf ..

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