jQuery UI Tabs Styling

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

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.

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.

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.

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(http://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.

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.

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.

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.

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.

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;
}

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.

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(http://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.

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 {
	border-top: none;
	border-bottom: 1px solid #ccc;
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	border-radius: 0px 0px 4px 4px;
}
#tabs-bottom .ui-tabs-nav li.ui-tabs-selected,
#tabs-bottom .ui-tabs-nav li.ui-state-active {
	top: -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.

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 > div {
	height: 35em;
}

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.

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 > div {
	height: 33em;
}

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.

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.

Tabs on a single line.

#tabs-one-line .scroller {
	overflow: auto;
}
#tabs-one-line ul {
	width: 1660px;
}

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!