定製谷歌翻譯下拉

我有一個網站，並在該網站正在加入谷歌翻譯，使人們可以在不同的語言定製谷歌翻譯下拉

，我添加的代碼看的網站是

<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和放置我的下拉在同一個地方，以便它的行爲相同，但它不工作....

來源

2012-08-09 user1561923

這是回答其他地方HTTP ：//stackoverflow.com/questions/6633127/can-you-style-the-google-translate-plugin – user1611087 2012-08-20 07:18:46

我知道這是一箇舊的帖子，但我分享我的解決方案在這裏爲他人像我一樣，他/她也會遇到同樣的問題。

該下拉列表位於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' 
     }); 
    }); 
});

來源

2012-12-05 19:11:50

FOR DROPDOWN語言鏈接的顏色：

只需添加這個腳本到頭..

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

來源

2015-06-20 05:29:09

定製谷歌翻譯下拉

回答

相關問題