HTML tab interface using only CSS

Question

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>

JavaScript-less interactions are nice in theory, but they break the "holy-trinity" of web development. HTML is meant for Content (Model), CSS is meant for Style (View), JavaScript is meant for Interaction (Controller). If you don't want to use JavaScript, HTML *and* CSS have to take up the slack, which means you'll be changing your markup to change the style. Generally speaking, you should leave the interactions to JavaScript, and plan for graceful degradation with your style sheets. — zzzzBov, Feb 08 '11 at 21:32
@zzzzBov HTML in my opinion is meant the be the view. The model is where the data lies (in a database?) and the controller is the code that manipulates the data (PHP or ASP on the server, perhaps?) CSS and JavaScript are to provide visual enhancements, but if they are removed, the website should still function - otherwise it would break the HTTP model! — Greg, Nov 11 '11 at 14:16
@Greg, In the context of the UI, HTML contains the data and is the model. If you're talking about the overarching context of a web application, your database is the model, your controller is a server script and your view is the generated HTML, CSS, & JS. — zzzzBov, Nov 11 '11 at 14:20
@zzzzBov Then someone like me comes along, who browses with JavaScript _off by default_ (since even large well known sites get compromised) and curses your name forever because your site doesn't work. Which is one of several reasons to adopt [progressive enhancement](http://alistapart.com/article/understandingprogressiveenhancement), which this question does. — Michael Hampton, Apr 25 '13 at 03:04

score 17 · Answer 1 · answered Feb 08 '11 at 19:50

:target is generally the preferred way of doing tabs.

You can also be clever 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 can allow you to do a pure CSS accordion, toggleable lists, or tabs like this.

score 4 · Answer 2 · answered Feb 08 '11 at 19:42

4

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.

answered Feb 08 '11 at 19:42

Knu

14,806
5
56
89

score 1 · Accepted Answer · edited Feb 09 '11 at 00:31

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

I don't understand how this became the accepted answer, since it is the only one that doesn't actually answer the question... O_o — gotofritz, Oct 30 '18 at 22:00

HTML tab interface using only CSS

3 Answers3

Linked

Related