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
– zzzzBov, Commented Feb 8, 2011 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
– Greg, Commented Nov 11, 2011 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
– zzzzBov, Commented Nov 11, 2011 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, which this question does. — Michael Hampton
– Michael Hampton, Commented Apr 25, 2013 at 3:04

showdev · Accepted Answer · 2024-08-07 06:36:05Z

22

:target is generally the preferred way of doing tabs.

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

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.

input {
  position: absolute;
  right: 100%;
}

input:checked+div {
  display: block;
}

div {
  display: none;
}

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

View on JSFiddle

edited Aug 7, 2024 at 6:36

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Feb 8, 2011 at 19:50

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jklue Over a year ago

Would this solution be considered "accessible"?

zzzzBov Over a year ago

No, ARIA needs to be applied in order to make an accessible tabs interface. It's not possible with CSS alone.

Knu · Accepted Answer · 2011-02-08 19:42:21Z

5

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 8, 2011 at 19:42

Knu

15.2k6 gold badges60 silver badges93 bronze badges

Comments

thirtydot · Accepted Answer · 2011-02-09 00:31:00Z

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

edited Feb 9, 2011 at 0:31

thirtydot

229k51 gold badges393 silver badges354 bronze badges

answered Feb 8, 2011 at 19:39

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

1 Comment

gotofritz Over a year ago

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

Rayyan007 · Accepted Answer · 2024-05-04 09:46:20Z

Here is a super easy code for achieving the functionality

.tabs {
  display: flex;
  flex-direction: column;
}
 
.tabs .tab-labels {
  display: flex;
  gap:3px;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  padding: 1em;
  background: #9AA092;
  cursor: pointer;
  width: 33.333%;
}
 
.tab-content {
  padding: 1em;
  display: none;
  background: DodgerBlue;
}
 
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <input type="radio" id="tab2" name="tabs">
  <input type="radio" id="tab3" name="tabs">
 
  <div class="tab-labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  
  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

Collectives™ on Stack Overflow

HTML tab interface using only CSS

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related