Donations

If you would like to donate something for my efforts, please visit my Amazon Wishlist or donate directly through

.

Thank you to those that have already donated - I'm enjoying the music and dancing!

Background Position

Bookmark

Calculator

Calendars

Countdown

Date Entry

Date/Time Entry

Datepicker

Flight Board

Google Chart

Google Search Blogbar

Google Search Bookbar

Google Search Newsbar

Google Search Videobar

iCalendar

Image Cube

Keypad

Label Effect

Linked Sliders

Localisation

Max Length

More

Real Person

Relationships

Signature

SVG Integration

Themes

Time Entry

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.

Bookmark this

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.

Show CSS
#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.

Show CSS
#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.

First

Second

Third

Minimalist tabs.

Show CSS
#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 .

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.

Show CSS
#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.

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

Show HTML
<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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show HTML
<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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show CSS
#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.

Show HTML
<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!

Contact Keith Wood at wood.keith{at}optusnet.com.au with comments or suggestions.

© 2010-15, Keith Wood