需要帮助设置 Google 翻译按钮的样式

Question

我无法通过 CSS 设置我网站上的 Google 翻译按钮的样式。具体来说，我想将背景/文本颜色从默认的白色/黑色更改为与我的页面匹配的颜色。到目前为止，我已经尝试了几种方法，包括此处另一个线程中提供的方法，但无济于事。我正在使用简单的下拉按钮，HTML 代码如下。提前感谢您的帮助！

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ca,da,de,el,en,es,fr,it,ja,ko,nl,pl,pt,ru,sv,tl', 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>

Answer 1

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': '#687074',
                'font-family': 'tahoma'
            });

        // Change hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
            $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white');
        }, function () {
            $(this).css('background-color', 'white').find('span.text').css('color', '#687074');
        });

        // Change Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B');

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

只需在您的<scripts> 标签之后粘贴以下内容

<style>
    div#google_translate_element div.goog-te-gadget-simple{background-color:green;}
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span{color:yellow}
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover{color:#fff}
</style>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

更新 DEMO 悬停。