Search code examples
htmluser-interfacetabscss

HTML tab interface using only CSS

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>
Solution

  • 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