我正在尝试修改 Google 翻译插件以更好地适应我们组织的 website .我已经能够自定义按钮的外观(您可以通过单击链接看到它),但似乎无法自定义下拉菜单。我在 Chrome 的网络开发人员工具中取得了成功,但是当我将它添加到样式表时代码被忽略了。
这是我正在尝试做的事情:
.goog-te-menu-item,
.goog-te-menu-item:link,
.goog-te-menu-item:visited,
.goog-te-menu-item:active {
color: #7D592E !important;
text-decoration: underline !important;
}
.goog-te-menu-item:hover {
background: #F1E9DA !important;
}
.goog-te-menu2 {
border: 0px !important;
}
如果它有所作为,我们正在使用内容管理系统。
任何见解将不胜感激!
最佳答案
我想我想出一个解决方案是公平的,因为我是将您的问题标记为重复的人。简而言之,没有简单的解决方案。然而,通过一些 Javascript hacking,这里是应该做的事情:
<script>
$( document ).ready(function() {
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
$('.goog-te-menu-frame').contents().find('head')[0].appendChild(cssLink)
})
</script>
将它放在 jquery 加载后的任何位置,它会在文档加载后触发,并将您的主要 style.css 文件添加到 iframe 以供谷歌翻译。那么添加css选择器就是一件简单的事情了。 GL
关于谷歌翻译插件的 CSS 样式 - 一些显示,但不是全部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30360378/