自定义Google翻译下拉列表 [英] Customizing Google Translator drop down

问题描述

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

I have a website and in this website am adding google translator so that people can see website in different languages

我添加的代码是

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

现在我想自定义下拉如背景颜色，文字颜色，文字大小和宽度如何我这样做

Now i want to customize the drop down like background color , text color, text size and width how can i do this

请帮助我

我试着给出下拉不透明度0，

I tried of giving the drop-down opacity 0 and placing my drop down on the same place so that it acts same but its not working....

推荐答案

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

I know this is an old post, but I'm sharing my solution here for others who, like me, had/will have the same problem.

下拉列表中有一个 iframe ，所以在你的页面上单独指定它的CSS将无济于事。以下是我用jQuery为Google翻译程序下拉菜单设置样式的方法：

The drop down is inside an iframe, so specifying its CSS on your page alone will not help. Here's how I styled my Google Translator drop down menu with 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'
        });
    });
});

这篇关于自定义Google翻译下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！