How do I style jQuery UI tabs vertically with a correctly themed border?

Question

I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.

I'm trying to achieve this:

But the best I can get is this:

You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.

I could just add a css line in like this:

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

But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.

Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:

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

And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.

What I've done to attempt to revert this css line is this:

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

Note that again, I'm not touching the border-bottom-color here.

The result of this, at least in firefox, is this taken from firebug:

For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.

Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.

Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?

Answer 1

Use @hexblot's answer and get the color dynamically.

To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.

+1 for trying to find a clean solution, without hardcoded stuff.

Answer 2

just add

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

and you should be ok. updated the fiddle with this line in the CSS (last line).