仅 CSS 标签：如何将内容与标签匹配？

Question

 .myradio { display: none; height: 0px; visibility: hidden; } .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+); }

 <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>

I'm trying to add content to different tabs in this code. I have little experience with frontend development, but I have tried for some time now with little success.

I need to mention that I need to use this code to send some in Email Report with Thunderbird client, that's why I am not allowed to use any JavaScript because the email client will not run it, so I need to stick to HTML and CSS only.

code link: https://docs.google.com/document/d/1LyUfU8u_fcIrF9xqAOT_mVPjnO0KKWSOqRH6PVBlrqQ/edit?usp=sharing

Answer 1

 .myradio { display: none; height: 0px; visibility: hidden; } .border{ height: 4px; background: black; } .tabbed section{ display:none; } .myradio:checked+label { font-weight: bold; } input:nth-of-type(1):checked~section:nth-of-type(1) { display:block; } input:nth-of-type(2):checked~section:nth-of-type(2) { display:block; } /* Tabbed Styles */ .tabbed { width: 80%; min-width: 400px; margin: 0 auto; margin-bottom: 68px; overflow: hidden; transition: border 250ms ease; } .tabbed ul { margin: 0; padding: 0; overflow: hidden; float: left; padding-left: 48px; list-style-type: none; } .tabbed ul * { margin: 0px; padding: 0px; } .tabbed form{ width: 120%; padding: 0 40px; } .tabbed ul .myradio+label { display: inline-block; padding: 10px 24px 8px; background-color: #fff; margin-left: 36px; 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+);

 <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> <div class='border'></div> <section> Content for Tab 1 </section> <section> Content for Tab 2..! </section> </form> </ul> </div>