Create Custom Tab Structure Using Radio Buttons

Posted By : Gaurav Arora | 24-Dec-2017

css

Hi Guys, as you know that in a web application tabs is common thing and we do the same thing with the help of using bootstrap’s tab or any other jquery plugin. But for that we have to use their libraries that will affect the load time of application. To overcome this issue we will create our custom tabs and that also in a very easy way.

Radio buttons will play a major role in creating our tabs as they will control the clicks of the tabs.

So, Let’s start for creating the structure for the same. Firstly we will start by writing our HTML structure.

<html>

Tab 1

Tab 1 Content
Tab 2

Tab 2 Content
Tab 3

Tab 3 Content
Tab 4

Tab 4 Content

</html>

In the above structure we are using label with radio buttons, as the label will behave as radio buttons like we do when we creates custom checkboxes or radio buttons and the default radio buttons will remain hidden.

Now we will write some css to make our Tabs look better.

      .tab-list {
  width: 100%;
  float: left;
  list-style: none;
  position: relative;
  font-family: Arial;
  color: #fff;
}
.tab-list li {
  float: left;
}

.tab-list li input[type="radio"] {
  display: none;
}
.tab-list li label {
  float: left;
  background: #ccc;
  padding: 5px 10px;
  color: #000;
  cursor: pointer;
  
}
.tab-list li label:hover {
  background: #666;
}
.tab-list li .content {
    z-index: 99999;
    display: none;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    position: absolute;
    top: 28px;
    left: 0;
    background: #fff;
    color: #000;
}
.tab-list li [id^="tab"]:checked + label {
  background: #666;
}
.tab-list li [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

In the above css code, I’m using basic properties, but you can modify the above as per the requirement. In this way we can create custom tabs structure with css only.