Building Tabs with RadioButtonList

Building Foundation-style tabs by applying CSS to an ASP RadioButtonList control.

ASP control

<asp:RadioButtonList ID="rblExemplo" CssClass="tabs" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Selected="True">First Tab</asp:ListItem>
    <asp:ListItem>Second Tab</asp:ListItem>
    <asp:ListItem>Third Tab</asp:ListItem>
    <asp:ListItem>Fourth Tab</asp:ListItem>
    <asp:ListItem Enabled="False">Disabled Tab</asp:ListItem>
</asp:RadioButtonList>

CSS

.tabs {
  position: relative;
  clear: both;
  margin: 0;
  padding: 0 !important;
  border: 0;
}
.tabs tr td {
  padding-bottom: 0 !important;
}
tr {
  float: left;
  margin: 0;
}
td {
  margin: 0;
  padding-left: 1%;
  padding-top: 1%;
  padding-right: 1%;
  padding-bottom: 0;
}
td label {
  background: #eee;
  padding: 10px;
  text-align: center;
  width: 100%;
}
td [type=radio] {
  display: none;
  padding: 0 !important;
}
[type=radio]:checked ~ label {
  background: #008316;
  border: 1px solid #008316;
  z-index: 2;
  color: #ffffff;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
[type=radio]:disabled ~ label {
  color: #ccc;
}