我有一个网站,在这个网站上添加谷歌翻译,以便人们可以看到不同语言的网站
<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并将我的下拉放在同一个地方,以便它的行为相同,但它不起作用….
解决方法
我知道这是一个老帖子,但我在这里分享我的解决方案给其他人,像我一样,已经/将会遇到同样的问题.
下拉列表位于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'
});
});
});
