Ever wanted to have a Tab Pane without having to use a pile of Javascript?
Well this tabbed pane is pure CSS, and can be used via keyboard or mouse.
It is known to be compatible with IE9, Firfox 3.6+, Opera 11, Chrome and Safari.
First off the tab needs to:
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> <label for="rad1">Introduction</label>
Note:
Doesn't this leave an ugly radio on the screen?
Yes, so why not just move it off-screen...
.tabGroup > input[type="radio"] { position: absolute; left:-100px; top:-100px; }
Now we need a content pane.
This is just a basic div.
<div class="tab1">Some content</div>
Note how the div has a class of "tab1", this exactly matches the class on the radio.
We add the following CSS to hide/show it when the associated radio is selected.
.tabGroup > div { display: none; } .tabGroup > .tab1:checked ~ .tab1 { display: block; }
<div class="tabGroup"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> <label for="rad1">Tab 1</label> <input type="radio" name="tabGroup1" id="rad2" class="tab2"/> <label for="rad2">Tab 2</label> <input type="radio" name="tabGroup1" id="rad3" class="tab3"/> <label for="rad3">Tab 3</label> <br/> <div class="tab1">Tab 1 content</div> <div class="tab2">Tab 2 content</div> <div class="tab3">Tab 3 content</div> </div>
/* Set the size and font of the tab widget */ .tabGroup { font: 10pt arial, verdana; width: 800px; height: 400px; } /* Configure the radio buttons to hide off screen */ .tabGroup > input[type="radio"] { position: absolute; left:-100px; top:-100px; } /* Configure labels to look like tabs */ .tabGroup > input[type="radio"] + label { /* inline-block such that the label can be given dimensions */ display: inline-block; /* A nice curved border around the tab */ border: 1px solid black; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; /* the bottom border is handled by the tab content div */ border-bottom: 0; /* Padding around tab text */ padding: 5px 10px; /* Set the background color to default gray (non-selected tab) */ background-color:#ddd; } /* Focused tabs need to be highlighted as such */ .tabGroup > input[type="radio"]:focus + label { border:1px dashed black; } /* Checked tabs must be white with the bottom border removed */ .tabGroup > input[type="radio"]:checked + label { background-color:white; font-weight: bold; border-bottom: 1px solid white; margin-bottom: -1px; } /* The tab content must fill the widgets size and have a nice border */ .tabGroup > div { display: none; border: 1px solid black; background-color: white; padding: 10px 10px; height: 100%; overflow: auto; box-shadow: 0 0 20px #444; -moz-box-shadow: 0 0 20px #444; -webkit-box-shadow: 0 0 20px #444; border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; } /* This matchs tabs displaying to thier associated radio inputs */ .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; }