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

我试图将样式设置为垂直选项卡，但样式与它们提供的略有不同

我正在努力做到这一点：

但我能得到的最好结果是：

您会注意到选项卡底部边框的颜色与文本颜色匹配，但我确实希望整个选项卡的边框保持一致

我可以这样添加一行css：

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

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

更深入地看问题，标准jQuery UI主题css似乎做到了以下几点：

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

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

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

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

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

至少在firefox中，这样做的结果来自firebug：

出于某种原因，看起来颜色被设置回默认浏览器颜色，即使没有任何颜色与边框底色接触。我只想通过.ui小部件content.ui state默认值来显示颜色，但我不知道如何做到这一点

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

这是一个例子。有人能帮我找到一个可维护的解决方案吗？

只需添加

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

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

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

要创建一个人造项目，请应用所需的jQuery类，然后使用

.css（）

获取颜色。就这么简单

---

+谢谢你的回答，但正如我在帖子中提到的，我不想硬编码任何颜色，因为颜色来自jQuery UI主题滚轮，它会根据我使用的主题而变化。我需要可维护的代码。我不认为这可以在纯CSS中完成，因为您提供1px宽度的边框会自动获得

currentColor

作为其颜色，这是

li

元素颜色属性。如果确实要更改活动元素的边框，可以执行

.ui state active{border color:currentColor！important；}

，但这并不是您所要求的。我能想到的唯一选择是设置颜色。