如何使用正确的主题边框垂直设置 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 的一部分。我不认为这应该改变边框颜色属性，因为只指定了速记边框的前两个（即宽度和样式）。所以我希望边框颜色不会在这里被覆盖，但实际上它是，并且它正在将它设置为字体颜色。

我为尝试还原此 css 行所做的是：

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

再次注意，我没有在此处触摸边框底部颜色。

这个结果，至少在 Firefox 中，是取自 firebug：

由于某种原因，颜色似乎被设置回默认浏览器颜色，即使没有触及边框底部颜色。我只想让 .ui-widget-content .ui-state-default 中的颜色通过，但我不知道该怎么做。

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

这是jsFiddle showing my problem。谁能帮我获得一个可维护的解决方案？

Answer 1

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

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

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

Answer 2

只需添加

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

你应该没事。用 CSS 中的这一行（最后一行）更新了小提琴。