Tab switcher with radio

Tabs using radio buttons and CSS3 pseudo-classes and transitions

by rdillman

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tab switcher</title>
</head>
<body>
  
<div class="tab-switcher">

    <section class="tab">
        <input type="radio" id="tab-one" name="tab-set" checked>
        <label for="tab-one" onclick="">Tab #1</label>
        <div class="tab-content">
        <p>First tab content goes here.</p>
        </div><!-- tab-content -->
    </section><!-- .tab (1) -->

    <section class="tab">
        <input type="radio" id="tab-two" name="tab-set">
        <label for="tab-two" onclick="">Tab #2</label>
        <div class="tab-content">
        <p>This is another tab, specifically number 2.</p>
        </div><!-- tab-content -->
   </section><!-- .tab (2) -->

   <section class="tab">
       <input type="radio" id="tab-three" name="tab-set">
       <label for="tab-three" onclick="">Tab #3</label>
       <div class="tab-content">
       <p>Here's three.</p>
       </div><!-- tab-content -->
   </section><!-- .tab (3) -->

</div><!-- .tab-switcher -->

  
</body>
</html>

CSS

.tab-switcher {
  position: relative;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.tab {
  float: left;
}

.tab-switcher label {
  padding: 14px;
  border-radius: 8px 8px 0 0;
  border: solid 1px #ccc;
  background: white;
  display: block;
  margin-left: -1px;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  -ms-transition: all .4s linear;
  transition: all .4s linear;
}

.tab-switcher label:hover {
  cursor: pointer;
}

.tab-content {
  position: absolute;
  top: 44px;
  left: 0;
  padding: 20px;
  background: #fff;
  width: 181px;
  border: solid 1px #ccc;
  border-top: none;
  color: #555;
  margin-left: -1px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  -ms-transition: all .4s linear;
  transition: all .4s linear;
}

.tab-switcher input[type=radio] {
  display: none;
}

.tab-switcher input[type=radio]:checked ~ .tab-content {
  z-index: 10;
  opacity: 1;
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ label {
  background: #888;
  color: white;
}