Simple CSS only tabs

Simple CSS only tabs

by humanzing

HTML

<input type="radio" name="tab" id="tab-A" checked="">
<input type="radio" name="tab" id="tab-B">

<label class="tab-link" for="tab-A">Buy</label>
<label class="tab-link" for="tab-B">Sell</label>
<article class="tab">
	 <form>
   <fieldset>
      <div>
         <h3>Mailing Address</h3>
         <label class="required">First Name: <input type="text" name="mailing_firstname" size="50" required /></label>
         <label class="required">Last Name: <input type="text" name="mailing_lastname" size="50" required /></label>
         <label>Organization: <input type="text" size="50" name="mailing_organization" /></label>
         <label class="required">Address: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">City: <input type="text" name="mailing_address" size="50" required /></label>

      </div>
   </fieldset>
</form>
</article>
<article class="tab">
	 <form>
   <fieldset>
      <div>
         <h3>Mailing Address</h3>
         <label class="required">First Name: <input type="text" name="mailing_firstname" size="50" required /></label>
         <label class="required">Last Name: <input type="text" name="mailing_lastname" size="50" required /></label>
         <label>Organization: <input type="text" size="50" name="mailing_organization" /></label>
         <label class="required">Address: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">City: <input type="text" name="mailing_address" size="50" required /></label>

      </div>
   </fieldset>
</form>
</article>

CSS

input[type="radio"] { 
	display: none;
}

.tab-link {
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	display: block;
	float: left;
	width: 50%;
	padding: 15px 0;
	background: #eee;
}

article.tab {
    padding: 20px;
    background: #ddd;    
}

#tab-B:not(:checked) ~ label:nth-of-type(1) { /* Style tab one selected */ 
	background: #ddd;
}

#tab-B:checked ~ label:nth-of-type(2) { /* Style tab two selected */ 
	background: #ddd;
}

.tab {
	clear: both;
	display: none;
}

input:nth-of-type(2):not(:checked) ~ .tab:nth-of-type(1),
input:nth-of-type(2):checked ~ .tab:nth-of-type(2)
{
  display: block;
}
form {
  width: 100%;
  position:relative;
}
form fieldset  label {
    position: relative;
    display: block;
    overflow: visible; /* if necessary */
    box-sizing: border-box; /* if necessary */
    padding-right: 1em;
    margin-bottom: 0.5em;
   // width:100%;
}
label select,
label input {
    position: absolute;
    top: 0;
    //left: 100%;
}
input{
    left: 30%;
    width: 65%;
}