CSS Google 翻译插件的样式 - 一些显示，但不是全部

Question

我正在尝试修改 Google 翻译插件以更好地适应我们组织的 website。我已经能够自定义按钮的外观（您可以通过单击 link 来查看），但似乎无法自定义下拉菜单。我在 Chrome 的 Web 开发人员工具中取得了成功，但是当我将它添加到样式表时代码被忽略了。

这是我正在尝试做的事情：

.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 以进行 google 翻译。那么添加css选择器就是一件简单的事情。 GL

CSS Google 翻译插件的样式 - 一些显示，但不是全部

CSS styling for Google Translate plugin - some displaying, but not all

css

google-translate

google-chrome-devtools