我有一个网站,并在该网站中添加谷歌翻译器,以便人们可以查看不同语言的网站
我添加的代码是
<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 翻译下拉菜单的样式:
$('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'
});
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)