jQuery UI Tabs Styling

Have you wanted to do something a little different with your jQuery UI Tabs?

Remove the header background
Remove the entire header
Remove most of the formatting
Make the non-active tabs smaller
Add icons
Tabs like buttons
Centre the tabs
Align the tabs to the right
Move the tabs to the bottom
On the left and rotated vertically
On the right and rotated vertically
Nested horizontally and then vertically
Have a single line of tabs that scrolls

Most of these examples only involve CSS changes that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.

First
Second
Third

Default tabs appearance.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs without the list background.

#tabs-nobg {
	padding: 0px;
}
#tabs-nobg .ui-tabs-nav {
	background: transparent;
	border-width: 0px 0px 1px 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
#tabs-nobg .ui-tabs-panel {
	margin: 0em 0.2em 0.2em 0.2em;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs without the header background.

#tabs-nohdr {
	padding: 0px;
	background: none;
	border-width: 0px;
}
#tabs-nohdr .ui-tabs-nav {
	padding-left: 0px;
	background: transparent;
	border-width: 0px 0px 1px 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
#tabs-nohdr .ui-tabs-panel {
	background: #f5f3e5 url(https://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;
	border-width: 0px 1px 1px 1px;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Minimalist tabs.

#tabs-min {
	background: transparent;
	border: none;
}
#tabs-min .ui-widget-header {
	background: transparent;
	border: none;
	border-bottom: 1px solid #c0c0c0;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
#tabs-min .ui-tabs-nav .ui-state-default {
	background: transparent;
	border: none;
}
#tabs-min .ui-tabs-nav .ui-state-active {
	background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
	border: none;
}
#tabs-min .ui-tabs-nav .ui-state-default a {
	color: #c0c0c0;
}
#tabs-min .ui-tabs-nav .ui-state-active a {
	color: #459e00;
}

Right click and save Minimalist arrow

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs with smaller non-selected tabs.

#tabs-smaller .ui-tabs-nav li {
	margin-top: 0.6em;
	font-size: 80%;
}
#tabs-smaller .ui-tabs-nav li.ui-tabs-selected,
#tabs-smaller .ui-tabs-nav li.ui-state-active {
	margin-top: 0em;
	font-size: 100%;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs with icons.

#tabs-icons .ui-tabs-nav .ui-icon {
	display: inline-block;
}

<div id="tabs-icons" class="tabs">
	<ul>
		<li><a href="#tabs-icons-1">
			<span class="ui-icon ui-icon-flag"></span> First</a>
		</li>
		...
	</ul>
	...
</div>

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs like buttons.

#tabs-buttons .ui-tabs-nav {
	padding: 0em;
	background: transparent;
	border-width: 0px;
}
#tabs-buttons .ui-tabs-nav li {
	position: static;
	margin: 0px;
	border-bottom: 1px solid #327e04 !important;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
#tabs-buttons .ui-tabs-nav li:first-child {
	-moz-border-radius: 6px 0px 0px 6px;
	-webkit-border-radius: 6px 0px 0px 6px;
	border-radius: 6px 0px 0px 6px;
}
#tabs-buttons .ui-tabs-nav li:last-child {
	-moz-border-radius: 0px 6px 6px 0px;
	-webkit-border-radius: 0px 6px 6px 0px;
	border-radius: 0px 6px 6px 0px;
}
#tabs-buttons .ui-tabs-nav li.ui-tabs-selected {
	padding-bottom: 0px;
	border-bottom: 1px solid #d4ccb0 !important;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Centred tabs.

#tabs-centre .ui-tabs-nav {
	height: 2.35em;
	text-align: center;
}
#tabs-centre .ui-tabs-nav li {
	display: inline-block;
	float: none;
	top: 0px;
	margin: 0em;
	padding-bottom: 0px;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs aligned right.

#tabs-to-right .ui-tabs-nav {
	float: right;
	border-left: none;
	-moz-border-radius: 0px 6px 6px 0px;
	-webkit-border-radius: 0px 6px 6px 0px;
	border-radius: 0px 6px 6px 0px;
}
#tabs-to-right .tabs-background {
	height: 2.6em;
	background: #ece8da url(https://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50%;
	border: 1px solid #d4ccb0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

This implementation also requires the addition of a background div before the tab content.

<div class="tabs">
	<ul>
		...
	</ul>
	<div class="tabs-background"></div>
	...
</div>

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs at the bottom.

#tabs-bottom {
	position: relative;
	padding-bottom: 3em;
}
#tabs-bottom .ui-tabs-nav {
	position: absolute;
	left: 0.25em;
	right: 0.25em;
	bottom: 0.25em;
	padding: 0em 0.2em 0.2em;
}
#tabs-bottom .ui-tabs-nav li {
	top: -1px;
	border-top: none;
	border-bottom: 1px solid #ccc !important;
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	border-radius: 0px 0px 4px 4px;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs on the left.

#tabs-left {
	position: relative;
	padding-left: 6.5em;
}
#tabs-left .ui-tabs-nav {
	position: absolute;
	left: 0.25em;
	top: 0.25em;
	bottom: 0.25em;
	width: 6em;
	padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left .ui-tabs-nav li {
	right: 1px;
	width: 100%;
	border-right: none;
	border-bottom-width: 1px !important;
	-moz-border-radius: 4px 0px 0px 4px;
	-webkit-border-radius: 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px;
	overflow: hidden;
}
#tabs-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-left .ui-tabs-nav li.ui-state-active {
	border-right: 1px solid transparent;
}
#tabs-left .ui-tabs-nav li a {
	float: right;
	width: 100%;
	text-align: right;
}
#tabs-left .ui-tabs-panel {
	height: 40em;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs on the left and rotated to vertical.

#tabs-left-vertical .ui-tabs-nav {
	position: absolute;
	width: 21em;
	transform: translate(-100%,0%) rotate(-90deg);
	transform-origin: 100% 0%;
}
#tabs-left-vertical .ui-tabs-nav li {
	float: right;
}
#tabs-left-vertical .ui-tabs-panel {
	padding-left: 3.5em;
}
#tabs-left-vertical .ui-tabs-panel {
	height: 20em;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs on the right.

#tabs-right {
	position: relative;
	padding-right: 6.5em;
}
#tabs-right .ui-tabs-nav {
	position: absolute;
	right: 0.25em;
	top: 0.25em;
	bottom: 0.25em;
	width: 6em;
	padding: 0.2em 0.2em 0.2em 0em;
}
#tabs-right .ui-tabs-nav li {
	width: 100%;
	border-left: none;
	border-bottom-width: 1px !important;
	-moz-border-radius: 0px 4px 4px 0px;
	-webkit-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
	overflow: hidden;
}
#tabs-right .ui-tabs-nav li.ui-tabs-selected,
#tabs-right .ui-tabs-nav li.ui-state-active {
	left: -1px;
	border-left: 1px solid transparent;
}
#tabs-right .ui-tabs-nav li a {
	width: 100%;
}
#tabs-right .ui-tabs-panel {
	height: 38em;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

Tabs on the right and rotated to vertical.

#tabs-right-vertical .ui-tabs-nav {
	position: absolute;
	right: 0.2em;
	width: 19em;
	transform: rotate(90deg) translate(19.6em,0em);
	transform-origin: 100% 0%;
}
#tabs-right-vertical .ui-tabs-panel {
	padding-right: 3.5em;
}
#tabs-right-vertical .ui-tabs-panel {
	height: 18em;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First
Second
Third

First
Second
Third

Nested tabs, horizontal then vertical.

#tabs-nested > .ui-tabs-panel {
	padding: 0em;
}
#tabs-nested-left {
	position: relative;
	padding-left: 6.5em;
}
#tabs-nested-left .ui-tabs-nav {
	position: absolute;
	left: 0.25em;
	top: 0.25em;
	bottom: 0.25em;
	width: 6em;
	padding: 0.2em 0 0.2em 0.2em;
}
#tabs-nested-left .ui-tabs-nav li {
	right: 1px;
	width: 100%;
	border-right: none;
	border-bottom-width: 1px !important;
	-moz-border-radius: 4px 0px 0px 4px;
	-webkit-border-radius: 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px;
	overflow: hidden;
}
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-nested-left .ui-tabs-nav li.ui-state-active {
	border-right: 1px solid transparent;
}
#tabs-nested-left .ui-tabs-nav li a {
	float: right;
	width: 100%;
	text-align: right;
}
#tabs-nested-left > div {
	height: 10em;
	overflow: auto;
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

First of eight tabs
Second of eight tabs
Third of eight tabs
Fourth of eight tabs
Fifth of eight tabs
Sixth of eight tabs
Seventh of eight tabs
Eighth of eight tabs

Tabs on a single line.

#tabs-one-line .scroller {
	height: 60px;
	border: 1px solid #D4CCB0;
	border-radius: 6px;
	overflow: auto;
}
#tabs-one-line ul {
	width: 1660px;
	border: 0;
}

This implementation also requires the addition of a div wrapper around the tabs ul.

<div class="tabs">
	<div class="scroller">
		<ul>
			...
		</ul>
	</div>
	...
</div>

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!