HTML Tab Interface Using CSS Only

Question

Is it possible to create a tabbed interface using only css without javascript? I mean the ability to switch tabs using css / html without javascript. Maybe with CSS 3.0?

the markup will look something like this:

<ul> <li><a href="#tab1">tab 1</a></li> <li><a href="#tab2">tab 2</a></li> <li><a href="#tab3">tab 3</a></li> </ul> <div id="tab1"> ...1... </div> <div id="tab2"> ...2... </div> <div id="tab3"> ...3... </div> 

Answer 1

This is possible using html and css for most modern browsers using the border-radius property (not supported by Internet Explorer 8 and below).

CSS

 li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */ -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */ border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */ border:1px solid black; display:inline; list-style-type:none; padding:5px; } li:hover {background:black;} li a {text-decoration:none; color:black;} li a:hover {color:white;} 

HTML

 <ul> <li><a href="#tab1">tab 1</a></li> <li><a href="#tab2">tab 2</a></li> <li><a href="#tab3">tab 3</a></li> </ul> 

You can use css3pie to support Internet Explorer, but you should keep in mind that it uses javascript.

Further information on border-radius can be found at: http://www.w3.org/TR/css3-background/#the-border-radius

Example: http://jsbin.com/idiza5/2

Answer 2

:target usually the preferred way to make tabs.

You can also be smart with input:radio or input:checkbox elements.

http://jsfiddle.net/nzYnc/

HTML:

 <label for="one">One</label> <label for="two">Two</label> <label for="three">Three</label> <input type="radio" id="one" name="tab" checked="checked" /> <div> First content </div> <input type="radio" id="two" name="tab" /> <div> Second content </div> <input type="radio" id="three" name="tab" /> <div> Third content </div> 

CSS

 input { position: absolute; right: 100%; } input:checked + div { display: block; } div { display: none; } 

Using the next-sibling ( + ) and :checked selectors in clever ways allows you to do pure CSS accordions, toggleable lists, or tabs like this.

Answer 3

In pure CSS3, you can use the :target selector to achieve a “tabbed interface”.
Just google "tab css3: target". Here's a tutorial about it.

Answer 4

A few days ago, some kind of link was very popular on twitter:
DEMO: http://cssglobe.com/lab/css3_tabs/01.html
Tutorial: http://cssglobe.com/post/9579/styling-full-width-tabs-with-css3

Hope this helps: D

EDIT: Oh, now I see that it uses javascript. To make “tabs” you need to make some kind of div (when pressed) to change CSS decency on another div, I don't know if you can use any selectors in css3 ...