Creating Pretty Tabs with HTML and CSS
If you are building data entry forms with HTML (using AngularJS or ASP.NET or other technologies), you may find that you need more space than can fit onto one page. In that case, you may want to implement tabs.
In my AngularJS course entitled “AngularJS Line of Business Applications“, I demonstrate how to build data entry forms using tabs. The result looked like this:
I also showed a version with styled tabs like this:
This blog post details how to change the rectangular tabs from the first image to the more stylized tabs in the second image.
To keep the example simple, we’ll work with just the tabs:
The code for the page shown above with the rectangular tabs is as follows:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>Acme Product Management</title><!– Style sheets –>
<link href=”css/bootstrap.css” rel=”stylesheet”/>
<link href=”css/app.css” rel=”stylesheet”/>
</head><body>
<div class=”panel panel-primary”>
<div class=”panel-heading” style=”font-size:large”>
Acme Product Management
</div><div class=”panel-body”>
<div class=”wizard”>
<a>
Basic Information
</a>
<a>
Price Details
</a>
<a>
Search Tags
</a>
</div>
</div></div>
</body></html>
Notice that the tabs are defined with anchor (<a>) tags. Notice also that this HTML links to two css files:
- bootstrap.css is from Bootstrap (http://getbootstrap.com/)
- app.css is our local style sheet file and looks like this:
body {
background-color: #C6D9F1;
}.wizard a {
background: #efefef;
display: inline-block;
margin-right: 5px;
min-width: 150px;
outline: none;
padding: 10px 40px 10px;
position: relative;
text-decoration: none;
}
.wizard .active {
background: #007ACC;
color: #fff;
}
We’ll need to add some additional styles to the app.css file in order to implement the arrow-style tabs as shown below:
First, we’ll add a before selector for the anchor tag:
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: “”;
top: 0;
left: 0;
}
This creates the “cut out” on the left side of the tabs.
Then we’ll add the triangle shaped arrow on the right side of the tabs using an after selector for the anchor tag:
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 21px solid #efefef;
position: absolute;
content: “”;
top: 0;
right: -20px;
z-index: 2;
}
Lastly, we want to ignore the “cut out” border on the left side of the first tab and the arrow on the right side of the last tab. This gives us a clean look for the far left and far right of the tab bar:
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
And if you want to round the corners at the far left and far right of the tab bar, you can round them with this:
.wizard a:first-child {
-webkit-border-radius: 8px 0 0 0px;
-moz-border-radius: 8px 0 0 0px;
border-radius: 8px 0 0 0px;
}.wizard a:last-child {
-webkit-border-radius: 0 8px 0px 0;
-moz-border-radius: 0 8px 0px 0;
border-radius: 0 8px 0px 0;
}
Try building this simple page and then adding each css class and running the application to see its effect on the tabs before adding the next css class.
Enjoy!
Juanjo — December 5, 2014 @ 1:00 am
Hi Deborah,
Thanks a lot for your wonderful help.
For the “active” triangle shaped arrow on the right side tab, I added the next rule:
.wizard a.active.after{
border-left: 21px solid #007ACC;
}
Otherwise it would be in the default gray color.
Juanjo
deborahk — December 5, 2014 @ 9:03 am
Thanks for catching that, Juanjo!
Bernhard — August 25, 2015 @ 5:47 am
Hi Deborah,
Thanks for the example. A really nice look’n’feel.
Best Regards
Bernhard
Shamna — May 23, 2016 @ 1:27 am
Hi Deborah,
Thanks for the example. Inorder to get the “active” triangle shaped arrow the mentioned blue color, I edited the above code
.wizard a.active.after{
border-left: 21px solid #007ACC;
}
as
.wizard a.active:after{
border-left: 21px solid #007ACC;
}
Note:- . is replaced with :