自定义Google Translator下拉列表

我有一个网站，在这个网站上添加谷歌翻译，以便人们可以看到不同语言的网站

我添加的代码是

 
  function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'bn,en,kn', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); }   

现在我想自定义下拉，如背景颜色，文本颜色，文本大小和宽度，我该怎么做

请帮我

我尝试给下拉不透明度0并将我的下拉放在同一个地方，以便它的行为相同，但它不起作用….

Answer 1

我知道这是一个老post，但我在这里分享我的解决方案给其他人，像我一样，已经/将会遇到同样的问题。

下拉列表位于iframe ，因此仅在页面上指定其CSS无济于事。 以下是我使用jQuery设置Google Translator下拉菜单的方式：

 $('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

FOR DROPDOWN语言链接颜色：

只需将此脚本添加到头部..