HTML tab interface using only CSS
Solution 1
It is possible with 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>
To support internet explorer you can use css3pie but you have to keep in mind that it uses javascript.
You can find more information about border-radius
at: http://www.w3.org/TR/css3-background/#the-border-radius
Example: http://jsbin.com/idiza5/2
Solution 2
:target
is generally the preferred way of doing tabs.
You can also be clever with input:radio
, or input:checkbox
elements.
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 can allow you to do a pure CSS accordion, toggleable lists, or tabs like this.
Solution 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.
Comments
-
Alex almost 2 years
is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with CSS 3.0?
the markup would be something like:
<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>
-
gotofritz over 5 yearsI don't understand how this became the accepted answer, since it is the only one that doesn't actually answer the question... O_o