I'm clearly an idiot because no matter how much I study other people's work I'm still not getting this and no amount of tinkering over the past month has helped me. I'm trying to just build tabs, failing miserably at it and what is in the forum hasn't sadly alleviated the issue. HTML <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab1" value="Primary" checked/><span class="sheet-tab sheet-tab1"></span>
<input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab2" value="Gear and Notes" /><span></span>
<input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab3" value="Backgrounds" /><span></span>
<input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab4" value="Rotes" /><span></span>
<input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab5" value="Experience" /><span></span>
<div class="sheet-tab-content sheet-tab1"> --Content-- </div> <other div tags with their "sheet-tab-content sheet-tab#s> CSS /* ******** Start code for tabs ******* */ div.sheet-tab-content{ display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5{ display: block; } input.sheet-tab{ width: 150px; height: 20px; position: relative; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-tab + span::before{ width: 16%; opacity:1; } input.sheet-tab::before{ content: attr(title); border: solid 1px #c8c8c8; border-bottom-color: black; text-align: center; display: inline-block; background: black; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 150px; height: 20px; font-size: 18px; } input.sheet-tab:checked::before{ background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); /* border-bottom-color: #fff; */ } input.sheet-tab:not(:first-child)::before { border-left: none; } input.sheet-tab2::before { background: #fee; background: -moz-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); } input.sheet-tab2:checked::after { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); border-bottom-color: #fcecec; } div.sheet-tab2 { background-color: #fcecec; } /* Tables */ div.sheet-table{ width: 100%; display: block; font-size: 1.25em; font-weight: bold; text-align: center; } /* Gear Tab */ div.sheet-gear{ width:48%; padding-left: 10px; text-align: center; } textarea.sheet-gear { height:650px; width:100%; } /* expanded backgrounds */ div.sheet-ebackname{ } div.sheet-ebackdesc{ width:100% } textarea.sheet-ebackdesc{ width:100%; height:105px; } div.sheet-ebacks{ display: inline; } input.sheet-ebacks { width: 37px; } input.sheet-ebacks:checked ~ div.sheet-ebacks{ display: none; } input.sheet-ebacks:checked + span::before { content: "Show"; color: #a00; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } input.sheet-ebacks + span::before { width: 36px; content: "Hide"; position: relative; left: -22px; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /*rotes tab*/ div.sheet-rotesph, input.sheet-rotesph{ width: 400px; } /* experience tab*/ div.sheet-XPdesc{ width: 70%; } div.sheet-XPspent{ width: 22%; right: 0px; } div.sheet-XPcomp{ width: 6%; } input.sheet-XPdesc{ width: 70%; } input.sheet-XPspent{ width: 21%; } input.sheet-XPcomp{ width: 6%; } input.sheet-XPcomp + span::before{ background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input.sheet-Dice{ width: 16%; } button[type=roll].sheet-Dice::before { content: ""; } select.sheet-Dice{ width: 150px; }