如果不使用JS代码，如何单击随Thunderbird作为附件发送的html css文件中的选项卡？
我正试图用Mozilla Thunderbird电子邮件客户端发送一份html css报告（作为附件）。选中“Display Attachments Inline”选项，这样我们就可以在不下载文件的情况下查看.html报告的呈现内容 我正在尝试使用此报告文件中的选项卡，我在此处找到了漂亮的选项卡： 我的问题是，当我用Thunderbird发送html css文件时，当.html文件的内容在电子邮件中呈现时，我可以看到与它们完全相同的选项卡，但我不能单击它们/不能从一个切换到另一个 我查看了代码，发现有一些JavaScript代码负责单击事件，我知道Thunderbird不允许运行JS代码（我猜是出于安全原因），所以我需要一种只使用html和css单击选项卡的方法如果不使用JS代码，如何单击随Thunderbird作为附件发送的html css文件中的选项卡？,html,css,email,tabs,thunderbird,Html,Css,Email,Tabs,Thunderbird,我正试图用Mozilla Thunderbird电子邮件客户端发送一份html css报告（作为附件）。选中“Display Attachments Inline”选项，这样我们就可以在不下载文件的情况下查看.html报告的呈现内容 我正在尝试使用此报告文件中的选项卡，我在此处找到了漂亮的选项卡： 我的问题是，当我用Thunderbird发送html css文件时，当.html文件的内容在电子邮件中呈现时，我可以看到与它们完全相同的选项卡，但我不能单击它们/不能从一个切换到另一个 我查看了代码，
使用纯CSS的现代标签设计
@导入url(http://fonts.googleapis.com/css?family=Roboto:300,400);
html，正文{
保证金：0；
填充：0；
背景：#E8ECEF；
身高：100%；
宽度：100%；
文本对齐：居中；
}
h1{
字体：40030px机器人，“开放式无网格”，Helvetica，无衬线；
文本转换：大写；
}
氢{
字体：300 22px roboto，“开放无网格”，Helvetica，无衬线；
文本转换：大写；
}
.开关箱{
列表样式：无；
保证金：0；
填充：0；
利润率：40px0；
文本对齐：居中；
}
.开关箱a{
显示：内联块；
宽度：32px；
高度：32px；
右边距：10px；
填充：3倍；
光标：指针；
背景：#FFF；
-webkit边界半径：50%；
边界半径：50%；
-webkit盒阴影：0 1px 5px rgba（0,0,0,0.15）；
盒影：0 1px 5px rgba（0,0,0,0.15）；
}
.开关箱a跨度{
显示：块；
宽度：100%；
身高：100%；
-webkit盒阴影：0-5px20px rgba（0,0,0,0.15）插入，0-5px20px rgba（255,255,0.4）插入；
盒影：0-5px20px rgba（0,0,0,0.15）插页，0-5px20px rgba（255,255,0.4）插页；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit边界半径：50%；
边界半径：50%；
}
.开关箱a.激活{
背景：#000；
-webkit盒阴影：0 3px 8px rgba（0,0,0,0.2）插图；
盒影：0 3px 8px rgba（0,0,0,0.2）插页；
}
.开关箱a.有效跨度{
边框颜色：#BBB；
}
.开关箱a.皮肤-绿松石跨度{
背景：#1ABC9C；
}
.开关箱a.皮肤-祖母绿跨度{
背景：#2ECC71；
}
.开关箱a.skin-peter河跨度{
背景：#3498DB；
}
.开关盒a.皮肤紫水晶跨度{
背景：#9B59B6；
}
.开关箱a.皮肤-湿沥青跨度{
背景#34495E；
}
.开关箱a.皮肤-阳光-花朵跨度{
背景：#F1C40F；
}
.开关箱a.皮胡萝卜跨度{
背景：#E67E22；
}
.开关箱a.皮肤-茜素span{
背景：#E74C3C；
}
.开关箱a.蒙皮石墨跨度{
背景#4545；
}
.开关箱a.蒙皮混凝土跨度{
背景#95A5A6；
}
.开关箱a.皮肤-绿色-海跨{
背景：#16A085；
}
.开关盒a.皮肤肾炎跨度{
背景：#27AE60；
}
.开关箱a.蒙皮-伯利兹孔跨度{
背景#2980B9；
}
.开关箱a.皮肤-紫藤跨度{
背景：#8E44AD；
}
.开关箱a.皮肤-午夜-蓝色跨度{
背景#2C3E50；
}
.开关箱a.皮肤橙色跨度{
背景：#F39C12；
}
.开关箱a.外皮南瓜跨度{
背景：#D35400；
}
.开关箱a.皮石榴跨度{
背景：#C0392B；
}
.开关箱a.皮肤-银色跨度{
背景：#BDC3C7；
}
.开关箱a.蒙皮石棉跨度{
背景#7F8C8D；
}
.开关箱a.蒙皮-减淡蓝色跨度{
背景：道奇蓝；
}
.开关箱a.皮肤-灰色-黑色跨度{
背景：url（数据：数据：数据：图像/svg+xml；基本64，基本64，PD94BBWWWWWWBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWBBWWWWWBWWWWWWWWBWWWWWWWWWWWWWWVVVVVVVVvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvUIPGOGICAGPHN0B3AGB2ZMC2V0PSIWJSIGC3RVCC1JB2xVCJ0II2I1YMRJCI3RVCC1VCGFJAXR5PSIXII8+CIAGICA8C3RVCCBVZMZZZZZQ9IJEWMCUIHN0B32BHY2L0ET0IMPGOGIDWBLUGLZGLLLBNQ+CIGPHJLY3QGED0IMCIGD2L2KDK9IJJJ9IJJJJJJJ0IJJJJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0IJ0B3ATY2SB2I9I9IJ0IZZZZZZZZZ2IZZZZZZZZZY2IJ0IJ0IJ0IZZ；
}
.开关箱a.皮肤-黑色-玻璃跨度{
背景：url（数据：image/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIIA/PGO8C3ZNIHHTBG5ZPSJODHRWOI8VD3D3LNCZLLM9YMd8YMDAWL3N2ZYIGD2LKDG9IJEWMCUIGHLD0IMTAWJSIGDMLLD0JVED00IMCAWIDEGMCHJLC2VYDBC3BLY3RSYXRPBZ0IBM9UZSI+CIAGPGGPGxBMVYBJ5Y2Z2VZ2VUZ2VUZ2VZZZZZZZZZZZZZZZZZZZZZVZVZJJJJJJJJJJJ5YV5VZV5VZY5VJJJ5V5VJJJ5V5V5VJJ5V5V5Y
<head>
<title>Modern Tabs Design with pure CSS</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);
html, body {
margin: 0;
padding: 0;
background: #E8ECEF;
height: 100%;
width: 100%;
text-align: center;
}
h1{
font: 400 30px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
h2{
font: 300 22px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
.switcher-box {
list-style: none;
margin: 0;
padding: 0;
margin: 40px 0;
text-align: center;
}
.switcher-box a {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
padding: 3px;
cursor: pointer;
background: #FFF;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.switcher-box a span {
display: block;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.switcher-box a.active {
background: #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
}
.switcher-box a.active span {
border-color: #BBB;
}
.switcher-box a.skin-turquoise span {
background: #1ABC9C;
}
.switcher-box a.skin-emerald span {
background: #2ECC71;
}
.switcher-box a.skin-peter-river span {
background: #3498DB;
}
.switcher-box a.skin-amethyst span {
background: #9B59B6;
}
.switcher-box a.skin-wet-asphalt span {
background: #34495E;
}
.switcher-box a.skin-sun-flower span {
background: #F1C40F;
}
.switcher-box a.skin-carrot span {
background: #E67E22;
}
.switcher-box a.skin-alizarin span {
background: #E74C3C;
}
.switcher-box a.skin-graphite span {
background: #454545;
}
.switcher-box a.skin-concrete span {
background: #95A5A6;
}
.switcher-box a.skin-green-sea span {
background: #16A085;
}
.switcher-box a.skin-nephritis span {
background: #27AE60;
}
.switcher-box a.skin-belize-hole span {
background: #2980B9;
}
.switcher-box a.skin-wisteria span {
background: #8E44AD;
}
.switcher-box a.skin-midnight-blue span {
background: #2C3E50;
}
.switcher-box a.skin-orange span {
background: #F39C12;
}
.switcher-box a.skin-pumpkin span {
background: #D35400;
}
.switcher-box a.skin-pomegranate span {
background: #C0392B;
}
.switcher-box a.skin-silver span {
background: #BDC3C7;
}
.switcher-box a.skin-asbestos span {
background: #7F8C8D;
}
.switcher-box a.skin-dodgerblue span {
background: dodgerblue;
}
.switcher-box a.skin-gray-black span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.switcher-box a.skin-black-glass span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
/* Tabbed Styles */
.tabbed {
width: 80%;
min-width: 400px;
margin: 0 auto;
margin-bottom: 68px;
border-bottom: 4px solid #000;
overflow: hidden;
transition: border 250ms ease;
}
.tabbed ul {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
padding-left: 48px;
list-style-type: none;
}
.tabbed ul * {
margin: 0px;
padding: 0px;
}
.tabbed ul li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #FFF;
margin-right: 46px;
z-index: 2;
position: relative;
cursor: pointer;
color: #777;
text-transform: uppercase;
font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
transition: all 250ms ease;
}
.tabbed ul li:before,
.tabbed ul li:after {
display: block;
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 44px;
background-color: #FFF;
transition: all 250ms ease;
}
.tabbed ul li:before {
right: -24px;
transform: skew(30deg, 0deg);
box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
}
.tabbed ul li:after {
left: -24px;
transform: skew(-30deg, 0deg);
box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
}
.tabbed ul li:hover,
.tabbed ul li:hover:before,
.tabbed ul li:hover:after {
background-color: #F4F7F9;
color: #444;
}
.tabbed ul li.active {
z-index: 3;
}
.tabbed ul li.active,
.tabbed ul li.active:before,
.tabbed ul li.active:after {
background-color: #000;
color: #fff;
}
/* Round Tabs */
.tabbed.round ul li {
border-radius: 8px 8px 0 0;
}
.tabbed.round ul li:before {
border-radius: 0 8px 0 0;
}
.tabbed.round ul li:after {
border-radius: 8px 0 0 0;
}
/* Skins */
.tabbed[class*="skin-"] ul li {
color: #FFF;
text-shadow: rgba(0,0,0,.1) 0 1px;
}
.tabbed.skin-turquoise {
border-bottom-color: #1ABC9C;
}
.tabbed.skin-turquoise ul li,
.tabbed.skin-turquoise ul li:before,
.tabbed.skin-turquoise ul li:after {
background-color: #34D6B6;
}
.tabbed.skin-turquoise ul li:hover,
.tabbed.skin-turquoise ul li:hover:before,
.tabbed.skin-turquoise ul li:hover:after {
background-color: #40E2C2;
}
.tabbed.skin-turquoise ul li.active,
.tabbed.skin-turquoise ul li.active:before,
.tabbed.skin-turquoise ul li.active:after {
background-color: #1ABC9C;
}
.tabbed.skin-emerald {
border-bottom-color: #2ECC71;
}
.tabbed.skin-emerald ul li,
.tabbed.skin-emerald ul li:before,
.tabbed.skin-emerald ul li:after {
background-color: #48E68B;
}
.tabbed.skin-emerald ul li:hover,
.tabbed.skin-emerald ul li:hover:before,
.tabbed.skin-emerald ul li:hover:after {
background-color: #54F297;
}
.tabbed.skin-emerald ul li.active,
.tabbed.skin-emerald ul li.active:before,
.tabbed.skin-emerald ul li.active:after {
background-color: #2ECC71;
}
.tabbed.skin-peter-river {
border-bottom-color: #3498DB;
}
.tabbed.skin-peter-river ul li,
.tabbed.skin-peter-river ul li:before,
.tabbed.skin-peter-river ul li:after {
background-color: #4EB2F5;
}
.tabbed.skin-peter-river ul li:hover,
.tabbed.skin-peter-river ul li:hover:before,
.tabbed.skin-peter-river ul li:hover:after {
background-color: #5ABEFF;
}
.tabbed.skin-peter-river ul li.active,
.tabbed.skin-peter-river ul li.active:before,
.tabbed.skin-peter-river ul li.active:after {
background-color: #3498DB;
}
.tabbed.skin-amethyst {
border-bottom-color: #9B59B6;
}
.tabbed.skin-amethyst ul li,
.tabbed.skin-amethyst ul li:before,
.tabbed.skin-amethyst ul li:after {
background-color: #B573D0;
}
.tabbed.skin-amethyst ul li:hover,
.tabbed.skin-amethyst ul li:hover:before,
.tabbed.skin-amethyst ul li:hover:after {
background-color: #C17FDC;
}
.tabbed.skin-amethyst ul li.active,
.tabbed.skin-amethyst ul li.active:before,
.tabbed.skin-amethyst ul li.active:after {
background-color: #9B59B6;
}
.tabbed.skin-wet-asphalt {
border-bottom-color: #34495E;
}
.tabbed.skin-wet-asphalt ul li,
.tabbed.skin-wet-asphalt ul li:before,
.tabbed.skin-wet-asphalt ul li:after {
background-color: #4E6378;
}
.tabbed.skin-wet-asphalt ul li:hover,
.tabbed.skin-wet-asphalt ul li:hover:before,
.tabbed.skin-wet-asphalt ul li:hover:after {
background-color: #5A6F84;
}
.tabbed.skin-wet-asphalt ul li.active,
.tabbed.skin-wet-asphalt ul li.active:before,
.tabbed.skin-wet-asphalt ul li.active:after {
background-color: #34495E;
}
.tabbed.skin-sun-flower {
border-bottom-color: #F1C40F;
}
.tabbed.skin-sun-flower ul li,
.tabbed.skin-sun-flower ul li:before,
.tabbed.skin-sun-flower ul li:after {
background-color: #FFDE29;
color: #0A0;
}
.tabbed.skin-sun-flower ul li:hover,
.tabbed.skin-sun-flower ul li:hover:before,
.tabbed.skin-sun-flower ul li:hover:after {
background-color: #FFEA35;
}
.tabbed.skin-sun-flower ul li.active,
.tabbed.skin-sun-flower ul li.active:before,
.tabbed.skin-sun-flower ul li.active:after {
background-color: #F1C40F;
color: #FFF;
}
.tabbed.skin-carrot {
border-bottom-color: #E67E22;
}
.tabbed.skin-carrot ul li,
.tabbed.skin-carrot ul li:before,
.tabbed.skin-carrot ul li:after {
background-color: #FF983C;
}
.tabbed.skin-carrot ul li:hover,
.tabbed.skin-carrot ul li:hover:before,
.tabbed.skin-carrot ul li:hover:after {
background-color: #FFA448;
}
.tabbed.skin-carrot ul li.active,
.tabbed.skin-carrot ul li.active:before,
.tabbed.skin-carrot ul li.active:after {
background-color: #E67E22;
}
.tabbed.skin-alizarin {
border-bottom-color: #E74C3C;
}
.tabbed.skin-alizarin ul li,
.tabbed.skin-alizarin ul li:before,
.tabbed.skin-alizarin ul li:after {
background-color: #FF6656;
}
.tabbed.skin-alizarin ul li:hover,
.tabbed.skin-alizarin ul li:hover:before,
.tabbed.skin-alizarin ul li:hover:after {
background-color: #FF7262;
}
.tabbed.skin-alizarin ul li.active,
.tabbed.skin-alizarin ul li.active:before,
.tabbed.skin-alizarin ul li.active:after {
background-color: #E74C3C;
}
.tabbed.skin-graphite {
border-bottom-color: #454545;
}
.tabbed.skin-graphite ul li,
.tabbed.skin-graphite ul li:before,
.tabbed.skin-graphite ul li:after {
background-color: #5F5F5F;
}
.tabbed.skin-graphite ul li:hover,
.tabbed.skin-graphite ul li:hover:before,
.tabbed.skin-graphite ul li:hover:after {
background-color: #6B6B6B;
}
.tabbed.skin-graphite ul li.active,
.tabbed.skin-graphite ul li.active:before,
.tabbed.skin-graphite ul li.active:after {
background-color: #454545;
}
.tabbed.skin-concrete {
border-bottom-color: #95A5A6;
}
.tabbed.skin-concrete ul li,
.tabbed.skin-concrete ul li:before,
.tabbed.skin-concrete ul li:after {
background-color: #AFBFC0;
}
.tabbed.skin-concrete ul li:hover,
.tabbed.skin-concrete ul li:hover:before,
.tabbed.skin-concrete ul li:hover:after {
background-color: #BBCBCC;
}
.tabbed.skin-concrete ul li.active,
.tabbed.skin-concrete ul li.active:before,
.tabbed.skin-concrete ul li.active:after {
background-color: #95A5A6;
}
.tabbed.skin-green-sea {
border-bottom-color: #16A085;
}
.tabbed.skin-green-sea ul li,
.tabbed.skin-green-sea ul li:before,
.tabbed.skin-green-sea ul li:after {
background-color: #30BA9F;
}
.tabbed.skin-green-sea ul li:hover,
.tabbed.skin-green-sea ul li:hover:before,
.tabbed.skin-green-sea ul li:hover:after {
background-color: #3CC6AB;
}
.tabbed.skin-green-sea ul li.active,
.tabbed.skin-green-sea ul li.active:before,
.tabbed.skin-green-sea ul li.active:after {
background-color: #16A085;
}
.tabbed.skin-nephritis {
border-bottom-color: #27AE60;
}
.tabbed.skin-nephritis ul li,
.tabbed.skin-nephritis ul li:before,
.tabbed.skin-nephritis ul li:after {
background-color: #41C87A;
}
.tabbed.skin-nephritis ul li:hover,
.tabbed.skin-nephritis ul li:hover:before,
.tabbed.skin-nephritis ul li:hover:after {
background-color: #4DD486;
}
.tabbed.skin-nephritis ul li.active,
.tabbed.skin-nephritis ul li.active:before,
.tabbed.skin-nephritis ul li.active:after {
background-color: #27AE60;
}
.tabbed.skin-belize-hole {
border-bottom-color: #2980B9;
}
.tabbed.skin-belize-hole ul li,
.tabbed.skin-belize-hole ul li:before,
.tabbed.skin-belize-hole ul li:after {
background-color: #439AD3;
}
.tabbed.skin-belize-hole ul li:hover,
.tabbed.skin-belize-hole ul li:hover:before,
.tabbed.skin-belize-hole ul li:hover:after {
background-color: #4FA6DF;
}
.tabbed.skin-belize-hole ul li.active,
.tabbed.skin-belize-hole ul li.active:before,
.tabbed.skin-belize-hole ul li.active:after {
background-color: #2980B9;
}
.tabbed.skin-wisteria {
border-bottom-color: #8E44AD;
}
.tabbed.skin-wisteria ul li,
.tabbed.skin-wisteria ul li:before,
.tabbed.skin-wisteria ul li:after {
background-color: #A85EC7;
}
.tabbed.skin-wisteria ul li:hover,
.tabbed.skin-wisteria ul li:hover:before,
.tabbed.skin-wisteria ul li:hover:after {
background-color: #B46AD3;
}
.tabbed.skin-wisteria ul li.active,
.tabbed.skin-wisteria ul li.active:before,
.tabbed.skin-wisteria ul li.active:after {
background-color: #8E44AD;
}
.tabbed.skin-midnight-blue {
border-bottom-color: #2C3E50;
}
.tabbed.skin-midnight-blue ul li,
.tabbed.skin-midnight-blue ul li:before,
.tabbed.skin-midnight-blue ul li:after {
background-color: #46586A;
}
.tabbed.skin-midnight-blue ul li:hover,
.tabbed.skin-midnight-blue ul li:hover:before,
.tabbed.skin-midnight-blue ul li:hover:after {
background-color: #526476;
}
.tabbed.skin-midnight-blue ul li.active,
.tabbed.skin-midnight-blue ul li.active:before,
.tabbed.skin-midnight-blue ul li.active:after {
background-color: #2C3E50;
}
.tabbed.skin-orange {
border-bottom-color: #F39C12;
}
.tabbed.skin-orange ul li,
.tabbed.skin-orange ul li:before,
.tabbed.skin-orange ul li:after {
background-color: #FFB62C;
}
.tabbed.skin-orange ul li:hover,
.tabbed.skin-orange ul li:hover:before,
.tabbed.skin-orange ul li:hover:after {
background-color: #FFC238;
}
.tabbed.skin-orange ul li.active,
.tabbed.skin-orange ul li.active:before,
.tabbed.skin-orange ul li.active:after {
background-color: #F39C12;
}
.tabbed.skin-pumpkin {
border-bottom-color: #D35400;
}
.tabbed.skin-pumpkin ul li,
.tabbed.skin-pumpkin ul li:before,
.tabbed.skin-pumpkin ul li:after {
background-color: #ED6E1A;
}
.tabbed.skin-pumpkin ul li:hover,
.tabbed.skin-pumpkin ul li:hover:before,
.tabbed.skin-pumpkin ul li:hover:after {
background-color: #F97A26;
}
.tabbed.skin-pumpkin ul li.active,
.tabbed.skin-pumpkin ul li.active:before,
.tabbed.skin-pumpkin ul li.active:after {
background-color: #D35400;
}
.tabbed.skin-pomegranate {
border-bottom-color: #C0392B;
}
.tabbed.skin-pomegranate ul li,
.tabbed.skin-pomegranate ul li:before,
.tabbed.skin-pomegranate ul li:after {
background-color: #DA5345;
}
.tabbed.skin-pomegranate ul li:hover,
.tabbed.skin-pomegranate ul li:hover:before,
.tabbed.skin-pomegranate ul li:hover:after {
background-color: #E65F51;
}
.tabbed.skin-pomegranate ul li.active,
.tabbed.skin-pomegranate ul li.active:before,
.tabbed.skin-pomegranate ul li.active:after {
background-color: #C0392B;
}
.tabbed.skin-silver {
border-bottom-color: #BDC3C7;
}
.tabbed.skin-silver ul li,
.tabbed.skin-silver ul li:before,
.tabbed.skin-silver ul li:after {
background-color: #D7DDE1;
color: #666;
}
.tabbed.skin-silver ul li:hover,
.tabbed.skin-silver ul li:hover:before,
.tabbed.skin-silver ul li:hover:after {
background-color: #E3E9ED;
}
.tabbed.skin-silver ul li.active,
.tabbed.skin-silver ul li.active:before,
.tabbed.skin-silver ul li.active:after {
background-color: #BDC3C7;
color: #FFF;
}
.tabbed.skin-asbestos {
border-bottom-color: #7F8C8D;
}
.tabbed.skin-asbestos ul li,
.tabbed.skin-asbestos ul li:before,
.tabbed.skin-asbestos ul li:after {
background-color: #99A6A7;
}
.tabbed.skin-asbestos ul li:hover,
.tabbed.skin-asbestos ul li:hover:before,
.tabbed.skin-asbestos ul li:hover:after {
background-color: #A5B2B3;
}
.tabbed.skin-asbestos ul li.active,
.tabbed.skin-asbestos ul li.active:before,
.tabbed.skin-asbestos ul li.active:after {
background-color: #7F8C8D;
}
.tabbed.skin-dodgerblue {
border-bottom-color: dodgerblue;
}
.tabbed.skin-dodgerblue ul li,
.tabbed.skin-dodgerblue ul li:before,
.tabbed.skin-dodgerblue ul li:after {
background-color: deepskyblue;
}
.tabbed.skin-dodgerblue ul li:hover,
.tabbed.skin-dodgerblue ul li:hover:before,
.tabbed.skin-dodgerblue ul li:hover:after {
background-color: #33ccff;
}
.tabbed.skin-dodgerblue ul li.active,
.tabbed.skin-dodgerblue ul li.active:before,
.tabbed.skin-dodgerblue ul li.active:after {
background-color: dodgerblue;
}
.tabbed.skin-gray-black {
border-bottom-color: #28343b;
}
.tabbed.skin-gray-black,
.tabbed.skin-gray-black ul li,
.tabbed.skin-gray-black ul li:before,
.tabbed.skin-gray-black ul li:after {
transition: none;
}
.tabbed.skin-gray-black ul li,
.tabbed.skin-gray-black ul li:before,
.tabbed.skin-gray-black ul li:after {
background-color: #68737B;
}
.tabbed.skin-gray-black ul li:hover,
.tabbed.skin-gray-black ul li:hover:before,
.tabbed.skin-gray-black ul li:hover:after {
background-color: #707A83;
}
.tabbed.skin-gray-black ul li.active,
.tabbed.skin-gray-black ul li.active:before,
.tabbed.skin-gray-black ul li.active:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.tabbed.skin-black-glass {
border-bottom-color: #0a0809;
}
.tabbed.skin-black-glass,
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
transition: none;
}
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
background-color: #333;
}
.tabbed.skin-black-glass ul li:hover,
.tabbed.skin-black-glass ul li:hover:before,
.tabbed.skin-black-glass ul li:hover:after {
background-color: #444;
}
.tabbed.skin-black-glass ul li.active,
.tabbed.skin-black-glass ul li.active:before,
.tabbed.skin-black-glass ul li.active:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
</style>
</head>
<body>
<h2>Amazing Tabs</h2>
<div class="tabbed round">
<ul>
<li>Tab4</li>
<li>Tab3</li>
<li>Tab2</li>
<li class="active">Tab1</li>
</ul>
</div>
<br><br><br>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll('.tabbed li');
var switchers = document.querySelectorAll('.switcher-box a');
var skinable = document.getElementById('skinable');
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].addEventListener("click", function() {
if (this.classList.contains('active'))
return;
var parent = this.parentNode,
innerTabs = parent.querySelectorAll('li');
for (var index = 0, iLen = innerTabs.length; index < iLen; index++) {
innerTabs[index].classList.remove('active');
}
this.classList.add('active');
});
}
for (var i = 0, len = switchers.length; i < len; i++) {
switchers[i].addEventListener("click", function() {
if (this.classList.contains('active'))
return;
var parent = this.parentNode,
innerSwitchers = parent.querySelectorAll('a'),
skinName = this.getAttribute('skin');
for (var index = 0, iLen = innerSwitchers.length; index < iLen; index++) {
innerSwitchers[index].classList.remove('active');
}
this.classList.add('active');
skinable.className = 'tabbed round ' + skinName;
});
}
});
</script>
</body>
<html>
<head>
<title>Modern Tabs Design with pure CSS</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto:300, 400);
html,
body {
margin: 0;
padding: 0;
background: #e8ecef;
height: 100%;
width: 100%;
text-align: center;
}
h1 {
font: 400 30px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
h2 {
font: 300 22px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
.myradio {
display: none;
height: 0px;
visibility: hidden;
}
.switcher-box {
list-style: none;
margin: 0;
padding: 0;
margin: 40px 0;
text-align: center;
}
.switcher-box a {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
padding: 3px;
cursor: pointer;
background: #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.switcher-box a span {
display: block;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset,
0 5px 20px rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset,
0 5px 20px rgba(255, 255, 255, 0.4) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.switcher-box a.active {
background: #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
}
.switcher-box a.active span {
border-color: #bbb;
}
.switcher-box a.skin-turquoise span {
background: #1abc9c;
}
.switcher-box a.skin-emerald span {
background: #2ecc71;
}
.switcher-box a.skin-peter-river span {
background: #3498db;
}
.switcher-box a.skin-amethyst span {
background: #9b59b6;
}
.switcher-box a.skin-wet-asphalt span {
background: #34495e;
}
.switcher-box a.skin-sun-flower span {
background: #f1c40f;
}
.switcher-box a.skin-carrot span {
background: #e67e22;
}
.switcher-box a.skin-alizarin span {
background: #e74c3c;
}
.switcher-box a.skin-graphite span {
background: #454545;
}
.switcher-box a.skin-concrete span {
background: #95a5a6;
}
.switcher-box a.skin-green-sea span {
background: #16a085;
}
.switcher-box a.skin-nephritis span {
background: #27ae60;
}
.switcher-box a.skin-belize-hole span {
background: #2980b9;
}
.switcher-box a.skin-wisteria span {
background: #8e44ad;
}
.switcher-box a.skin-midnight-blue span {
background: #2c3e50;
}
.switcher-box a.skin-orange span {
background: #f39c12;
}
.switcher-box a.skin-pumpkin span {
background: #d35400;
}
.switcher-box a.skin-pomegranate span {
background: #c0392b;
}
.switcher-box a.skin-silver span {
background: #bdc3c7;
}
.switcher-box a.skin-asbestos span {
background: #7f8c8d;
}
.switcher-box a.skin-dodgerblue span {
background: dodgerblue;
}
.switcher-box a.skin-gray-black span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.switcher-box a.skin-black-glass span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.myradio:checked + label {
font-weight: bold;
}
/* Tabbed Styles */
.tabbed {
width: 80%;
min-width: 400px;
margin: 0 auto;
margin-bottom: 68px;
border-bottom: 4px solid #000;
overflow: hidden;
transition: border 250ms ease;
}
.tabbed ul {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
padding-left: 48px;
list-style-type: none;
}
.tabbed ul * {
margin: 0px;
padding: 0px;
}
.tabbed ul .myradio + label {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #fff;
margin-right: 46px;
z-index: 2;
position: relative;
cursor: pointer;
color: #777;
text-transform: uppercase;
font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
transition: all 250ms ease;
}
.tabbed ul .myradio + label:before,
.tabbed ul .myradio + label:after {
display: block;
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 44px;
background-color: #fff;
transition: all 250ms ease;
}
.tabbed ul .myradio + label:before {
right: -24px;
transform: skew(30deg, 0deg);
box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 5px,
inset rgba(255, 255, 255, 0.09) -1px 0;
}
.tabbed ul .myradio + label:after {
left: -24px;
transform: skew(-30deg, 0deg);
box-shadow: rgba(0, 0, 0, 0.1) -3px 2px 5px,
inset rgba(255, 255, 255, 0.09) 1px 0;
}
.tabbed ul .myradio + label:hover,
.tabbed ul .myradio + label:hover:before,
.tabbed ul .myradio + label:hover:after {
background-color: #f4f7f9;
color: #444;
}
.tabbed ul .myradio:checked + label {
z-index: 3;
}
.tabbed ul .myradio:checked + label,
.tabbed ul .myradio:checked + label:before,
.tabbed ul .myradio:checked + label:after {
background-color: #000;
color: #fff;
}
/* Round Tabs */
.tabbed.round ul .myradio + label {
border-radius: 8px 8px 0 0;
}
.tabbed.round ul .myradio + label:before {
border-radius: 0 8px 0 0;
}
.tabbed.round ul .myradio + label:after {
border-radius: 8px 0 0 0;
}
/* Skins */
.tabbed[class*="skin-"] ul .myradio + label {
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 0 1px;
}
.tabbed.skin-turquoise {
border-bottom-color: #1abc9c;
}
.tabbed.skin-turquoise ul .myradio + label,
.tabbed.skin-turquoise ul .myradio + label:before,
.tabbed.skin-turquoise ul .myradio + label:after {
background-color: #34d6b6;
}
.tabbed.skin-turquoise ul .myradio + label:hover,
.tabbed.skin-turquoise ul .myradio + label:hover:before,
.tabbed.skin-turquoise ul .myradio + label:hover:after {
background-color: #40e2c2;
}
.tabbed.skin-turquoise ul .myradio:checked + label,
.tabbed.skin-turquoise ul .myradio:checked + label:before,
.tabbed.skin-turquoise ul .myradio:checked + label:after {
background-color: #1abc9c;
}
.tabbed.skin-emerald {
border-bottom-color: #2ecc71;
}
.tabbed.skin-emerald ul .myradio + label,
.tabbed.skin-emerald ul .myradio + label:before,
.tabbed.skin-emerald ul .myradio + label:after {
background-color: #48e68b;
}
.tabbed.skin-emerald ul .myradio + label:hover,
.tabbed.skin-emerald ul .myradio + label:hover:before,
.tabbed.skin-emerald ul .myradio + label:hover:after {
background-color: #54f297;
}
.tabbed.skin-emerald ul .myradio:checked + label,
.tabbed.skin-emerald ul .myradio:checked + label:before,
.tabbed.skin-emerald ul .myradio:checked + label:after {
background-color: #2ecc71;
}
.tabbed.skin-peter-river {
border-bottom-color: #3498db;
}
.tabbed.skin-peter-river ul .myradio + label,
.tabbed.skin-peter-river ul .myradio + label:before,
.tabbed.skin-peter-river ul .myradio + label:after {
background-color: #4eb2f5;
}
.tabbed.skin-peter-river ul .myradio + label:hover,
.tabbed.skin-peter-river ul .myradio + label:hover:before,
.tabbed.skin-peter-river ul .myradio + label:hover:after {
background-color: #5abeff;
}
.tabbed.skin-peter-river ul .myradio:checked + label,
.tabbed.skin-peter-river ul .myradio:checked + label:before,
.tabbed.skin-peter-river ul .myradio:checked + label:after {
background-color: #3498db;
}
.tabbed.skin-amethyst {
border-bottom-color: #9b59b6;
}
.tabbed.skin-amethyst ul .myradio + label,
.tabbed.skin-amethyst ul .myradio + label:before,
.tabbed.skin-amethyst ul .myradio + label:after {
background-color: #b573d0;
}
.tabbed.skin-amethyst ul .myradio + label:hover,
.tabbed.skin-amethyst ul .myradio + label:hover:before,
.tabbed.skin-amethyst ul .myradio + label:hover:after {
background-color: #c17fdc;
}
.tabbed.skin-amethyst ul .myradio:checked + label,
.tabbed.skin-amethyst ul .myradio:checked + label:before,
.tabbed.skin-amethyst ul .myradio:checked + label:after {
background-color: #9b59b6;
}
.tabbed.skin-wet-asphalt {
border-bottom-color: #34495e;
}
.tabbed.skin-wet-asphalt ul .myradio + label,
.tabbed.skin-wet-asphalt ul .myradio + label:before,
.tabbed.skin-wet-asphalt ul .myradio + label:after {
background-color: #4e6378;
}
.tabbed.skin-wet-asphalt ul .myradio + label:hover,
.tabbed.skin-wet-asphalt ul .myradio + label:hover:before,
.tabbed.skin-wet-asphalt ul .myradio + label:hover:after {
background-color: #5a6f84;
}
.tabbed.skin-wet-asphalt ul .myradio:checked + label,
.tabbed.skin-wet-asphalt ul .myradio:checked + label:before,
.tabbed.skin-wet-asphalt ul .myradio:checked + label:after {
background-color: #34495e;
}
.tabbed.skin-sun-flower {
border-bottom-color: #f1c40f;
}
.tabbed.skin-sun-flower ul .myradio + label,
.tabbed.skin-sun-flower ul .myradio + label:before,
.tabbed.skin-sun-flower ul .myradio + label:after {
background-color: #ffde29;
color: #0a0;
}
.tabbed.skin-sun-flower ul .myradio + label:hover,
.tabbed.skin-sun-flower ul .myradio + label:hover:before,
.tabbed.skin-sun-flower ul .myradio + label:hover:after {
background-color: #ffea35;
}
.tabbed.skin-sun-flower ul .myradio:checked + label,
.tabbed.skin-sun-flower ul .myradio:checked + label:before,
.tabbed.skin-sun-flower ul .myradio:checked + label:after {
background-color: #f1c40f;
color: #fff;
}
.tabbed.skin-carrot {
border-bottom-color: #e67e22;
}
.tabbed.skin-carrot ul .myradio + label,
.tabbed.skin-carrot ul .myradio + label:before,
.tabbed.skin-carrot ul .myradio + label:after {
background-color: #ff983c;
}
.tabbed.skin-carrot ul .myradio + label:hover,
.tabbed.skin-carrot ul .myradio + label:hover:before,
.tabbed.skin-carrot ul .myradio + label:hover:after {
background-color: #ffa448;
}
.tabbed.skin-carrot ul .myradio:checked + label,
.tabbed.skin-carrot ul .myradio:checked + label:before,
.tabbed.skin-carrot ul .myradio:checked + label:after {
background-color: #e67e22;
}
.tabbed.skin-alizarin {
border-bottom-color: #e74c3c;
}
.tabbed.skin-alizarin ul .myradio + label,
.tabbed.skin-alizarin ul .myradio + label:before,
.tabbed.skin-alizarin ul .myradio + label:after {
background-color: #ff6656;
}
.tabbed.skin-alizarin ul .myradio + label:hover,
.tabbed.skin-alizarin ul .myradio + label:hover:before,
.tabbed.skin-alizarin ul .myradio + label:hover:after {
background-color: #ff7262;
}
.tabbed.skin-alizarin ul .myradio:checked + label,
.tabbed.skin-alizarin ul .myradio:checked + label:before,
.tabbed.skin-alizarin ul .myradio:checked + label:after {
background-color: #e74c3c;
}
.tabbed.skin-graphite {
border-bottom-color: #454545;
}
.tabbed.skin-graphite ul .myradio + label,
.tabbed.skin-graphite ul .myradio + label:before,
.tabbed.skin-graphite ul .myradio + label:after {
background-color: #5f5f5f;
}
.tabbed.skin-graphite ul .myradio + label:hover,
.tabbed.skin-graphite ul .myradio + label:hover:before,
.tabbed.skin-graphite ul .myradio + label:hover:after {
background-color: #6b6b6b;
}
.tabbed.skin-graphite ul .myradio:checked + label,
.tabbed.skin-graphite ul .myradio:checked + label:before,
.tabbed.skin-graphite ul .myradio:checked + label:after {
background-color: #454545;
}
.tabbed.skin-concrete {
border-bottom-color: #95a5a6;
}
.tabbed.skin-concrete ul .myradio + label,
.tabbed.skin-concrete ul .myradio + label:before,
.tabbed.skin-concrete ul .myradio + label:after {
background-color: #afbfc0;
}
.tabbed.skin-concrete ul .myradio + label:hover,
.tabbed.skin-concrete ul .myradio + label:hover:before,
.tabbed.skin-concrete ul .myradio + label:hover:after {
background-color: #bbcbcc;
}
.tabbed.skin-concrete ul .myradio:checked + label,
.tabbed.skin-concrete ul .myradio:checked + label:before,
.tabbed.skin-concrete ul .myradio:checked + label:after {
background-color: #95a5a6;
}
.tabbed.skin-green-sea {
border-bottom-color: #16a085;
}
.tabbed.skin-green-sea ul .myradio + label,
.tabbed.skin-green-sea ul .myradio + label:before,
.tabbed.skin-green-sea ul .myradio + label:after {
background-color: #30ba9f;
}
.tabbed.skin-green-sea ul .myradio + label:hover,
.tabbed.skin-green-sea ul .myradio + label:hover:before,
.tabbed.skin-green-sea ul .myradio + label:hover:after {
background-color: #3cc6ab;
}
.tabbed.skin-green-sea ul .myradio:checked + label,
.tabbed.skin-green-sea ul .myradio:checked + label:before,
.tabbed.skin-green-sea ul .myradio:checked + label:after {
background-color: #16a085;
}
.tabbed.skin-nephritis {
border-bottom-color: #27ae60;
}
.tabbed.skin-nephritis ul .myradio + label,
.tabbed.skin-nephritis ul .myradio + label:before,
.tabbed.skin-nephritis ul .myradio + label:after {
background-color: #41c87a;
}
.tabbed.skin-nephritis ul .myradio + label:hover,
.tabbed.skin-nephritis ul .myradio + label:hover:before,
.tabbed.skin-nephritis ul .myradio + label:hover:after {
background-color: #4dd486;
}
.tabbed.skin-nephritis ul .myradio:checked + label,
.tabbed.skin-nephritis ul .myradio:checked + label:before,
.tabbed.skin-nephritis ul .myradio:checked + label:after {
background-color: #27ae60;
}
.tabbed.skin-belize-hole {
border-bottom-color: #2980b9;
}
.tabbed.skin-belize-hole ul .myradio + label,
.tabbed.skin-belize-hole ul .myradio + label:before,
.tabbed.skin-belize-hole ul .myradio + label:after {
background-color: #439ad3;
}
.tabbed.skin-belize-hole ul .myradio + label:hover,
.tabbed.skin-belize-hole ul .myradio + label:hover:before,
.tabbed.skin-belize-hole ul .myradio + label:hover:after {
background-color: #4fa6df;
}
.tabbed.skin-belize-hole ul .myradio:checked + label,
.tabbed.skin-belize-hole ul .myradio:checked + label:before,
.tabbed.skin-belize-hole ul .myradio:checked + label:after {
background-color: #2980b9;
}
.tabbed.skin-wisteria {
border-bottom-color: #8e44ad;
}
.tabbed.skin-wisteria ul .myradio + label,
.tabbed.skin-wisteria ul .myradio + label:before,
.tabbed.skin-wisteria ul .myradio + label:after {
background-color: #a85ec7;
}
.tabbed.skin-wisteria ul .myradio + label:hover,
.tabbed.skin-wisteria ul .myradio + label:hover:before,
.tabbed.skin-wisteria ul .myradio + label:hover:after {
background-color: #b46ad3;
}
.tabbed.skin-wisteria ul .myradio:checked + label,
.tabbed.skin-wisteria ul .myradio:checked + label:before,
.tabbed.skin-wisteria ul .myradio:checked + label:after {
background-color: #8e44ad;
}
.tabbed.skin-midnight-blue {
border-bottom-color: #2c3e50;
}
.tabbed.skin-midnight-blue ul .myradio + label,
.tabbed.skin-midnight-blue ul .myradio + label:before,
.tabbed.skin-midnight-blue ul .myradio + label:after {
background-color: #46586a;
}
.tabbed.skin-midnight-blue ul .myradio + label:hover,
.tabbed.skin-midnight-blue ul .myradio + label:hover:before,
.tabbed.skin-midnight-blue ul .myradio + label:hover:after {
background-color: #526476;
}
.tabbed.skin-midnight-blue ul .myradio:checked + label,
.tabbed.skin-midnight-blue ul .myradio:checked + label:before,
.tabbed.skin-midnight-blue ul .myradio:checked + label:after {
background-color: #2c3e50;
}
.tabbed.skin-orange {
border-bottom-color: #f39c12;
}
.tabbed.skin-orange ul .myradio + label,
.tabbed.skin-orange ul .myradio + label:before,
.tabbed.skin-orange ul .myradio + label:after {
background-color: #ffb62c;
}
.tabbed.skin-orange ul .myradio + label:hover,
.tabbed.skin-orange ul .myradio + label:hover:before,
.tabbed.skin-orange ul .myradio + label:hover:after {
background-color: #ffc238;
}
.tabbed.skin-orange ul .myradio:checked + label,
.tabbed.skin-orange ul .myradio:checked + label:before,
.tabbed.skin-orange ul .myradio:checked + label:after {
background-color: #f39c12;
}
.tabbed.skin-pumpkin {
border-bottom-color: #d35400;
}
.tabbed.skin-pumpkin ul .myradio + label,
.tabbed.skin-pumpkin ul .myradio + label:before,
.tabbed.skin-pumpkin ul .myradio + label:after {
background-color: #ed6e1a;
}
.tabbed.skin-pumpkin ul .myradio + label:hover,
.tabbed.skin-pumpkin ul .myradio + label:hover:before,
.tabbed.skin-pumpkin ul .myradio + label:hover:after {
background-color: #f97a26;
}
.tabbed.skin-pumpkin ul .myradio:checked + label,
.tabbed.skin-pumpkin ul .myradio:checked + label:before,
.tabbed.skin-pumpkin ul .myradio:checked + label:after {
background-color: #d35400;
}
.tabbed.skin-pomegranate {
border-bottom-color: #c0392b;
}
.tabbed.skin-pomegranate ul .myradio + label,
.tabbed.skin-pomegranate ul .myradio + label:before,
.tabbed.skin-pomegranate ul .myradio + label:after {
background-color: #da5345;
}
.tabbed.skin-pomegranate ul .myradio + label:hover,
.tabbed.skin-pomegranate ul .myradio + label:hover:before,
.tabbed.skin-pomegranate ul .myradio + label:hover:after {
background-color: #e65f51;
}
.tabbed.skin-pomegranate ul .myradio:checked + label,
.tabbed.skin-pomegranate ul .myradio:checked + label:before,
.tabbed.skin-pomegranate ul .myradio:checked + label:after {
background-color: #c0392b;
}
.tabbed.skin-silver {
border-bottom-color: #bdc3c7;
}
.tabbed.skin-silver ul .myradio + label,
.tabbed.skin-silver ul .myradio + label:before,
.tabbed.skin-silver ul .myradio + label:after {
background-color: #d7dde1;
color: #666;
}
.tabbed.skin-silver ul .myradio + label:hover,
.tabbed.skin-silver ul .myradio + label:hover:before,
.tabbed.skin-silver ul .myradio + label:hover:after {
background-color: #e3e9ed;
}
.tabbed.skin-silver ul .myradio:checked + label,
.tabbed.skin-silver ul .myradio:checked + label:before,
.tabbed.skin-silver ul .myradio:checked + label:after {
background-color: #bdc3c7;
color: #fff;
}
.tabbed.skin-asbestos {
border-bottom-color: #7f8c8d;
}
.tabbed.skin-asbestos ul .myradio + label,
.tabbed.skin-asbestos ul .myradio + label:before,
.tabbed.skin-asbestos ul .myradio + label:after {
background-color: #99a6a7;
}
.tabbed.skin-asbestos ul .myradio + label:hover,
.tabbed.skin-asbestos ul .myradio + label:hover:before,
.tabbed.skin-asbestos ul .myradio + label:hover:after {
background-color: #a5b2b3;
}
.tabbed.skin-asbestos ul .myradio:checked + label,
.tabbed.skin-asbestos ul .myradio:checked + label:before,
.tabbed.skin-asbestos ul .myradio:checked + label:after {
background-color: #7f8c8d;
}
.tabbed.skin-dodgerblue {
border-bottom-color: dodgerblue;
}
.tabbed.skin-dodgerblue ul .myradio + label,
.tabbed.skin-dodgerblue ul .myradio + label:before,
.tabbed.skin-dodgerblue ul .myradio + label:after {
background-color: deepskyblue;
}
.tabbed.skin-dodgerblue ul .myradio + label:hover,
.tabbed.skin-dodgerblue ul .myradio + label:hover:before,
.tabbed.skin-dodgerblue ul .myradio + label:hover:after {
background-color: #33ccff;
}
.tabbed.skin-dodgerblue ul .myradio:checked + label,
.tabbed.skin-dodgerblue ul .myradio:checked + label:before,
.tabbed.skin-dodgerblue ul .myradio:checked + label:after {
background-color: dodgerblue;
}
.tabbed.skin-gray-black {
border-bottom-color: #28343b;
}
.tabbed.skin-gray-black,
.tabbed.skin-gray-black ul .myradio + label,
.tabbed.skin-gray-black ul .myradio + label:before,
.tabbed.skin-gray-black ul .myradio + label:after {
transition: none;
}
.tabbed.skin-gray-black ul .myradio + label,
.tabbed.skin-gray-black ul .myradio + label:before,
.tabbed.skin-gray-black ul .myradio + label:after {
background-color: #68737b;
}
.tabbed.skin-gray-black ul .myradio + label:hover,
.tabbed.skin-gray-black ul .myradio + label:hover:before,
.tabbed.skin-gray-black ul .myradio + label:hover:after {
background-color: #707a83;
}
.tabbed.skin-gray-black ul .myradio:checked + label,
.tabbed.skin-gray-black ul .myradio:checked + label:before,
.tabbed.skin-gray-black ul .myradio:checked + label:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.tabbed.skin-black-glass {
border-bottom-color: #0a0809;
}
.tabbed.skin-black-glass,
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
transition: none;
}
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
background-color: #333;
}
.tabbed.skin-black-glass ul .myradio + label:hover,
.tabbed.skin-black-glass ul .myradio + label:hover:before,
.tabbed.skin-black-glass ul .myradio + label:hover:after {
background-color: #444;
}
.tabbed.skin-black-glass ul .myradio:checked + label,
.tabbed.skin-black-glass ul .myradio:checked + label:before,
.tabbed.skin-black-glass ul .myradio:checked + label:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
</style>
</head>
<body>
<h2>Amazing Tabs</h2>
<div class="tabbed round">
<ul>
<form action="#">
<input
name="myradio"
type="radio"
id="radio1"
class="myradio"
checked
/>
<label for="radio1">Tab 1</label>
<input name="myradio" type="radio" id="radio2" class="myradio" />
<label for="radio2">Tab 2</label>
</form>
</ul>
</div>
<br /><br /><br />
</body>
</html>