JQuery UI Tabs - Transparent Background

I have trouble setting jqueryUI tabs to have transparent background. I took the basic tabs example and added the following code, as advised e.g. here, but trying to set transparent

Solution 1:

That border you see is the one from the ul element with this class .ui-widget-header. Is used to give a visual effect of the active tab that hides the border with his background and the properties:

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

Since your active tab has not background anymore then can't hide the border.

Solution 2:

try background: rgba(0,0,0,0); and see if that makes any difference?

Can you set up a fiddle?

Solution 3:

Simple. Add the following class right after your posted CSS:

.ui-widget-header {
    border-bottom:0;
}

---

UPDATE:

The above code will remove the entire border-bottom of the navigation, which is not what we wanted. jQuery uses the active tab's class background to overlay (or hide) the border underneath it, giving the effect that it meshes with the content below it.

Since our backgrounds here are set to transparent, I don't think it's possible to hide the bottom border with how jQuery UI constructs these tabs. Instead, we're presented with a bare wireframe.

I suggest coming up with an alternative way to show tabbed content than using jQuery UI's library.

Solution 4:

Got it! Just change transparent to inherit! This is a trick!

.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel,
.ui-widget-header .ui-state-default,
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
        background: inherit;
}

It's just enough to place it to the following elements:

.ui-tabs,
.ui-widget-header,
.ui-widget-header .ui-state-default,
.ui-widget-header .ui-state-active
{
        background: inherit;
}

The question is - isn't it dirty? Is it cross-browser safe?