CSS selector for active tab, action button method

I used the CSS Wizardry guide for making tabs, pretty much verbatim from the guide.&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a> Using that method, how would I go about styling the active and inactive tabs, such that the button which represents each tab looks different if the section it represents is active (from clicking on the button) vs. if it isn't. I've been scouring around the forums and examples, but can't find a clear answer. Some posts referred to some specific sheets, but those sheets used pretty different syntax or setup than the example. Is there a clear and simple example to go off of? Like, how would you do that given the code in the link above? Or could one perhaps be added to the example documentation? Thanks!

Anybody? There are more examples of doing this with radio buttons than with action buttons that I can find. If it helps to see the exact code. This is the beginning html, before going into content for each div: &lt;div class="tabbuttoncontainer"&gt; &lt;div class="tabbutton0"&gt; &lt;button class="tabbutton" type="action" name="act_allsection"&gt;ALL&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton1"&gt; &lt;button class="tabbutton" type="action" name="act_wepnstab"&gt;Weapons &amp; Armor&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton2"&gt; &lt;button class="tabbutton" type="action" name="act_skillsandpoints" &gt;SKILLS &amp; POINTS&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton3"&gt; &lt;button class="tabbutton" type="action" name="act_spellstab" &gt;SPELLS&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton4"&gt; &lt;button class="tabbutton" type="action" name="act_story" &gt;STORY&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton5"&gt; &lt;button class="tabbutton" type="action" name="act_pointstab" &gt;POINTS SPENT&lt;/button&gt; &lt;/div&gt; &lt;div class="tabbutton6"&gt; &lt;button class="tabbutton" type="action" name="act_inventorytabsection" &gt;INVENTORY&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='allsection' /&gt; &lt;div class="allsection"&gt; &lt;div class="dodaslayout"&gt; This is the sheetworker at the end: const buttonlist = ["allsection","wepnstab","skillsandpoints","spellstab","story","pointstab","inventorytabsection"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); And the CSS: div.tabbuttoncontainer { display: flex; flex-direction: row; justify-content: space-between; width: 470px; margin-left: 5px; } button[type="action"].tabbutton { font-family: 'Girassol'; font-size: 80%; height: 12pt; width: 75pt; background-color: black; color: white; border: 1px solid gray; border-radius: 80px; -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); box-shadow: 1px 1px 8px 1px rgba(53, 39, 25, 0.45); } /*Configure the tab buttons*/ .allsection, .wepnstab, .skillsandpoints, .spellstab, .story, .pointstab, .inventorytabsection { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="allsection"] ~ div.allsection, .sheet-tabstoggle[value="wepnstab"] ~ div.wepnstab, .sheet-tabstoggle[value="skillsandpoints"] ~ div.skillsandpoints, .sheet-tabstoggle[value="spellstab"] ~ div.spellstab, .sheet-tabstoggle[value="story"] ~ div.story, .sheet-tabstoggle[value="pointstab"] ~ div.pointstab, .sheet-tabstoggle[value="inventorytabsection"] ~ div.inventorytabsection { display: block; }

Try putting a copy of the hidden @{sheetTab} input inside &lt;div class="tabbuttoncontainer&gt;...&lt;/div&gt; just above the div's that include your buttons, HTML example; &lt;div class="tabbuttoncontainer"&gt; &lt;input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='allsection' /&gt; &lt;div class="tabbutton0"&gt; ... then style the appropriate button based on the value of @{sheetTab}. CSS exmaple; .sheet-tabstoggle[value="allsection"] ~ .tabbutton0 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="wepnstab"] ~ .tabbutton1 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="skillsandpoints"] ~ .tabbutton2 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="spellstab"] ~ .tabbutton3 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="story"] ~ .tabbutton4 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="pointstab"] ~ .tabbutton5 .tabbutton {outline: 2px solid red;} .sheet-tabstoggle[value="inventorytabsection"] ~ .tabbutton6 .tabbutton {outline: 2px solid red;} Style as desired of course. Untested, but I think this should work.

Awesome, thanks so much! Worked like a charm! Would love to see that demo added to the tabs documentation, for the next guy. Since styling tabs is pretty important for visual distinction.&nbsp;

Glad that worked.&nbsp; I've updated the wiki's button based tabs as well.&nbsp;

Excellent! Much appreciated, for the next guy! haha