Question

我试图修改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;
}

如果它有所作为，我们就会使用内容管理系统。

非常感谢任何见解！

Answer 1

我想我提出一个解决方案是公平的，因为我是那个将你的问题标记为重复的人。简而言之，没有简单的解决方案。但是，通过一些Javascript黑客攻击，以下是应该做的诀窍：

<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 for google translate。然后添加css选择器就是一件简单的事情。 GL

Google Translate插件的CSS样式 - 有些显示，但不是全部

1 个答案: