自定义谷歌翻译下拉答案

【问题标题】：Customizing Google Translator drop down自定义谷歌翻译下拉
【发布时间】：2015-06-27 04:39:39
【问题描述】：

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

我添加的代码是

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

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

请帮帮我

我尝试将下拉不透明度设置为 0 并将我的下拉菜单放在同一个地方，这样它的作用相同但它不起作用....

【问题讨论】：

这是在其他地方回答的 stackoverflow.com/questions/6633127/…

标签： jquery css google-translator-toolkit

【解决方案1】：

我知道这是一篇旧帖子，但我在这里与其他人分享我的解决方案，这些人像我一样有/将有同样的问题。

下拉列表位于iframe 内，因此仅在页面上指定其 CSS 将无济于事。以下是我使用 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'
        });
    });
});

【讨论】：

【解决方案2】：

对于下拉语言链接颜色：

只需将此脚本添加到 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>

【讨论】：