如何使用正确的主题边框垂直设置jQuery UI选项卡的样式？

Question

我正在尝试将jQuery UI tabs设置为垂直标签，但样式与它们提供的Vertical Tab Demo略有不同。

我正在努力实现这个目标：

但我能得到的最好的是：

您会注意到标签底部边框的颜色与文字颜色相匹配，但我真的希望边框在整个标签周围保持一致。

我可以像这样添加一个css行：

.ui-tabs-vertical > .ui-tabs-nav li {
    border-bottom-color: #C5DBEC !important;
}

但我不想硬编码任何颜色，因为它们是由jQuery UI主题滚轮提供的，所以如果我决定更改主题，或者为我的网站的不同品牌设置不同的主题，那么这将成为维持的噩梦。

看一下这个问题，似乎标准的jQuery UI主题css就是这样做的：

.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }

这是因为整个事情通常设置为水平标签，需要删除底部边框。我无法删除它，因为它是生成的主题滚动css的一部分。我不认为这应该改变border-color属性，因为只指定了速记边框的前两个（即宽度和样式）。所以我希望这里不会覆盖border-color，但实际上它是，并且它将它设置为字体颜色。

我试图恢复此css行的目的是：

.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }

请注意，我在这里没有触及边框底色。

至少在firefox中，这个结果来自于firebug：

出于某种原因，即使没有任何东西触及border-bottom-color，看起来颜色也会被设置回默认的浏览器颜色。我只想要.ui-widget-content .ui-state-default的颜色来实现，但我无法理解如何去做。

使用inherit不起作用，因为我不想从DOM中的父元素中获取颜色。

这是一个jsFiddle showing my problem。任何人都可以帮助我获得可维护的解决方案吗？

Answer 1

使用@hexblot的答案并动态获取颜色。

为此，创建一个虚假项目，应用您想要的jQuery类，然后使用.css()来获取颜色。就这么简单。

+1，试图找到一个干净的解决方案，没有硬编码的东西。

Answer 2

只需添加

.ui-state-active { color: #2E6E9E !important; }

你应该没问题。在CSS（最后一行）更新了这一行的小提琴。