覆盖 GWT 中的用户代理 (Chrome) 默认样式

Question

我有一个 TabBar，在上次 Chrome 升级 (32.0.1700.76 m) 之后，在焦点选项卡上显示了一个轮廓：

在过去的版本中没有。为了恢复旧视图，我尝试在 CSS 中设置一些轮廓，如下所示：

.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}

（石灰只是为了看看它是否有效）。

即使是这个编辑，计算出来的样式仍然是默认的（-webkit-focus-ring-color auto 5px; ）：

我应该怎么做才能覆盖这种用户代理样式？

编辑

我认为蓝色轮廓不是 HTML (div)：

我要收起的是 TabBar Item 对象：

我真的不知道为什么 Churro 解决方案以前有效:(

Answer 1

我尝试了以下 CSS 来突出显示此 Stackoverflow 页面上的文本区域，并且成功了：

.wmd-input:focus {
    outline: lime auto 5px !important;
}

确保:focus 前面的选择器是正确的。

编辑

我查看了我自己的 GWT 应用程序中的 TabPanel。 TabBarItem 中围绕它的蓝色环的元素是包含选项卡文本的Label (div)，而不是gwt-TabBarItem。

试试这个选择器：.gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus