Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Tabs

1487049087

Edited 1487084424
Rin Vindor
Sheet Author
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; }
1487064410
Finderski
Pro
Sheet Author
Compendium Curator
This is how I do it on my character sheet... HTML: <!-- Set up the Tabs --> <input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="Basic Info" checked="checked"/>  <span class="sheet-tab sheet-tab1" style='line-height: 40px;'>BASIC INFO</span> <input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Edges & Hindrances" />  <span class="sheet-tab sheet-tab2" style='line-height: 20px;'>EDGES & HINDRANCES</span> <input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="3" title="Skills" />  <span class="sheet-tab sheet-tab3" style='line-height: 40px;'>SKILLS</span> <input type="radio" class="sheet-tab sheet-tab4" name="attr_core-tab" value="4" title="Equipment" />  <span class="sheet-tab sheet-tab4" style='line-height: 40px;'>EQUIPMENT</span> <input type="checkbox" class="sheet-showVehicles" name="attr_vehicle" style="width: 15px; display: none;" /> <input type="radio" class="sheet-tab sheet-tab7" name="attr_core-tab" value="7" title="Vehicles" />  <span class="sheet-tab sheet-tab7" style='line-height: 40px;'>VEHICLES</span> <input type="checkbox" class="sheet-hideArcanum" name="attr_ArcanumTab" style="width: 15px; display: none;"> <input type="radio" class="sheet-tab sheet-tab5" name="attr_core-tab" value="5" title="Arcanum" />  <span class="sheet-tab sheet-tab5" style='line-height: 40px;'>ARCANUM</span> <input type="radio" class="sheet-tab sheet-tab6" name="attr_core-tab" value="6" title="Journal" />  <span class="sheet-tab sheet-tab6" style='line-height: 40px;'>JOURNAL</span> <input type="radio" class="sheet-tab sheet-tab99" name="attr_core-tab" value="99" title="All" /> <span class="sheet-tab sheet-tab99" style='line-height: 40px;'>ALL</span> <input type="radio" class="sheet-combat sheet-tab8" name="attr_core-tab" value="8" title="Combat Options" /> <span class="sheet-combat sheet-tab8" style='line-height: 40px;'>⚔</span> <!-- End Tab setup --> <div class="sheet-section-core"><!-- Core Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-edges" style="width: 800px;"><!-- Begin Edges/Hindrances Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-skills" style="width: 800px;"><!-- Begin Skills --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-gear" style="width: 800px;"><!-- Begin Equipment Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-vehicles"><!-- Vehicles Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-arcanum" style="width: 800px;"><!-- Begin Arcanum --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-journal" style="width: 800px;"><!-- Begin Journal --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-combat" style="width: 800px;"><!-- Begin Combat Options --> <!--Content of Tab Goes Here--> </div> CSS: /*----------- Tabs Setup -------------*/ div.sheet-core-content { display: none; width:840px;} .charsheet div[class^="sheet-section"], .charsheet div[class^="sheet-options"] { display: none; } .charsheet input.sheet-tab1:checked ~ div.sheet-section-core, .charsheet input.sheet-tab2:checked ~ div.sheet-section-edges, .charsheet input.sheet-tab3:checked ~ div.sheet-section-skills, .charsheet input.sheet-tab4:checked ~ div.sheet-section-gear, .charsheet input.sheet-tab5:checked ~ div.sheet-section-arcanum, .charsheet input.sheet-tab6:checked ~ div.sheet-section-journal, .charsheet input.sheet-tab7:checked ~ div.sheet-section-vehicles, .charsheet input.sheet-tab8:checked ~ div.sheet-section-combat, .charsheet input.sheet-attacks:checked ~ div.sheet-options-attack, .charsheet input.sheet-defend:checked ~ div.sheet-options-defend, .charsheet input.sheet-misc:checked ~ div.sheet-options-other, { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } .charsheet input.sheet-hideArcanum:checked + div.sheet-section-arcanum, .charsheet input.sheet-showVehicles:not(:checked) + div.sheet-section-vehicles { display: none; } .charsheet input.sheet-tab, .charsheet input.sheet-combat-options {     width: 87px;     height: 40px;     cursor: pointer; position: relative; opacity: 0; z-index: 9999; } .charsheet span.sheet-tab, .charsheet span.sheet-combat-options { text-align: center;     display: inline-block; font-size: 11px; background: #c7c3b0; color: black; font-weight: bold; border-radius: 4px; width: 87px;      height: 40px;      cursor: pointer; position: relative; vertical-align: middle; margin-left: -91px;  } .charsheet input.sheet-combat { width: 25px; height: 40px; cursor: pointer; position: relative; opacity: 0; z-index: 99; } .charsheet span.sheet-combat { width: 25px; height: 40px; font-size 16px; text-align: center; display: inline-block; cursor: pointer; position: relative; verticalalign: middle; margin-left: -29px; } .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab7:checked + span.sheet-tab7, .charsheet input.sheet-tab99:checked + span.sheet-tab99, .charsheet input.sheet-attacks:checked + span.sheet-attacks, .charsheet input.sheet-defend:checked + span.sheet-defend, .charsheet input.sheet-misc:checked + span.sheet-misc {     background: #dbc792;       color: #755b27;  border-radius: 4px; } .charsheet input.sheet-combat:checked + span.sheet-combat { border: black 1px dotted; border-radius: 4px;  } /*----------- End Tab Setup -----------*/ Hope this helps.
1487075322

Edited 1487075367
plexsoup
Marketplace Creator
Sheet Author
API Scripter
@ Rin Vindor These lines: "input.sheet-tab1:checked ~ div.sheet-tab1" are looking for inputs with the class name "sheet-tab1", etc. Your inputs don't have class names. So instead of this: <input type="radio" name="attr_sheet_type" value="Gear and Notes" /> try this: <input type="radio" class="sheet-tab sheet-tab1" name="attr_sheet_type" value="Gear and Notes" />
1487076890

Edited 1487076903
Kryx
Pro
Sheet Author
API Scripter
Sharing my experience: For the Shaped sheet I have largely moved away from tabs as much as possible due to my usage of edit mode (a state to edit the sheet in, and a state to click macros). Additionally while two people (play and GM) are using the same sheet I often find that tabs stop updating properly. It doesn't always happen, but I often have to close the sheet and reopen it or refresh to get tabs working if my player is using the sheet.
1487084344

Edited 1487084507
Rin Vindor
Sheet Author
@ plexsoup Sorry every time I copy things from my code, the damn forums don't accept it. I've now edited it to properly include that here. Currently I have 5 buttons on the top left of my sheet that all work in switching to another tab but they're just buttons I cannot for the life of me get them to switch to text like everyone else seems to be able to do.
1487091761
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Seems like you're missing the title for each input. title="tab1 title" I added the title for tab1 and 2 here <a href="https://jsfiddle.net/3c5nx8do/1/" rel="nofollow">https://jsfiddle.net/3c5nx8do/1/</a>
That unfortunately doesn't solve the issue at hand. <a href="https://gyazo.com/e108d8195f1ca9e3d3f14df640057cab" rel="nofollow">https://gyazo.com/e108d8195f1ca9e3d3f14df640057cab</a> The actual text not displaying is the issue I'm having.
1487094258
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Can you share a jsfiddle link or a github gist?
Ye. Sure thing. <a href="https://jsfiddle.net/we8hop99/" rel="nofollow">https://jsfiddle.net/we8hop99/</a>
1487094680
plexsoup
Marketplace Creator
Sheet Author
API Scripter
At first glance it looks like you copied multiple css tricks onto one set of inputs. I see it's doing the fill in all bubbles from the left trick.
1487095028
plexsoup
Marketplace Creator
Sheet Author
API Scripter
You'll need to go through and add class names and css selectors for all the 'fill all bubbles from the left', so they don't interfere with your tabs. eg: /* Styles unique to fake checkbox (unchecked) */ input[type="checkbox"] + span::before { into :&nbsp; /* Styles unique to fake checkbox (unchecked) */ input.sheet-className[type="checkbox"] + span::before {
1487096472
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Tabs are working, but you'll have to fix all your attribute radio inputs <a href="https://jsfiddle.net/ex7f91u8/1/" rel="nofollow">https://jsfiddle.net/ex7f91u8/1/</a>
1487134883

Edited 1487138366
Rin Vindor
Sheet Author
Losing mah mind to this. Plus the sheet viewer keeps making me think I've bugged the code somewhere too. *fist shake*
So I've managed to fix all the "fill in the bubbles" (and I greatly appreciate your help guys I'd literally be still at this with no progress I'm sure). Right now I've got 2 minor issues left. 1.&nbsp; <a href="https://gyazo.com/8f039d61c9e85cfdb26852d93ae898ce" rel="nofollow">https://gyazo.com/8f039d61c9e85cfdb26852d93ae898ce</a> The first 2 options under Virtuals should be clickable and switch between another tag. 2.&nbsp; <a href="https://gyazo.com/9ec051e53095bb511141f2ee8c4cb8ff" rel="nofollow">https://gyazo.com/9ec051e53095bb511141f2ee8c4cb8ff</a> How the hell do I straighten these? I've tried all sorts of things like changing the align, I've also tried text-align:center but nothing seems to work.
1487142811
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Hi Rin. Can you link me to a gist or pastebin or jsfiddle again? It's a bit hard to diagnose just from a screencap.
Yeah sure thing! <a href="https://jsfiddle.net/we8hop99/1/" rel="nofollow">https://jsfiddle.net/we8hop99/1/</a>
1487273592

Edited 1487273626
Rin Vindor
Sheet Author
Also having issues setting up this button anyone mind elaborating what I'm missing on this thing? I've tried several ways to get this to work to no avail. &lt;button type="roll" name="weapon_roll" value="&{template:default} {{name=@{weapon}}} {{result=[[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1 ]]}}"&gt;&lt;/button&gt;
1487276247
plexsoup
Marketplace Creator
Sheet Author
API Scripter
This is probably obvious, but you have inputs for attr_combatAttribute and attr_combatAbility somewhere on your sheet right? &nbsp;
Yeah they're directly above it. &lt;div&gt; &lt;table align="center" &gt; &lt;tr&gt; &lt;h3 align="center"&gt;Combat&lt;/h3&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Weapon&lt;/th&gt; &lt;th&gt;Damage&lt;/th&gt; &lt;th&gt;Range&lt;/th&gt; &lt;th&gt;Rate&lt;/th&gt; &lt;th&gt;Clip&lt;/th&gt; &lt;th&gt;Conceal&lt;/th&gt; &lt;th&gt;Attribute&lt;/th&gt; &lt;th&gt;Ability&lt;/th&gt; &lt;/tr&gt; &lt;fieldset align="center"&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_weapon" value="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_damage" value="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_range" value="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_rate" value="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_clip" value="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" style="width:80px" name="attr_conceal" value="" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select name="attr_combatAttribute" style="width:85px"&gt; &lt;option valule="@{Strength}"&gt;Strength&lt;/option&gt; &lt;option valule="@{Dexterity}"&gt;Dexterity&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select name="attr_combatAbility" style="width:85px"&gt; &lt;option valule="@{Archery}"&gt;Archery&lt;/option&gt; &lt;option valule="@{Athletics}"&gt;Athletics&lt;/option&gt; &lt;option valule="@{Brawl}"&gt;Brawl&lt;/option&gt; &lt;option valule="@{Firearms}"&gt;Firearms&lt;/option&gt; &lt;option valule="@{Melee}"&gt;Melee&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;button type="roll" name="weapon_roll" value="&{template:default} {{name=@{weapon}}} {{result=[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1 ]}}"&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/fieldset&gt; &lt;/table&gt; &lt;br&gt; &lt;br&gt; &lt;div align="center"&gt; &lt;label&gt;Armor&lt;/label&gt; &lt;input type="text" placeholder="Name" /&gt; &lt;input type="text" placeholder="Amount" /&gt; &lt;input type="text" placeholder="Penalty" /&gt; &lt;/div&gt; &lt;br&gt; &lt;div&gt; &lt;h3&gt;Gear&lt;/h3&gt; &lt;textarea name="attr_gear"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;Notes&lt;/h3&gt; &lt;textarea name="attr_othernotes"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt;
1487286743

Edited 1487286829
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Is the problem that the roll doesn't work or the button doesn't show up on the page? BTW: The roll statement you just posted is different from the one you posted further up. (There should be double square brackets in the result.) When I have trouble making a button roll work, I take the inner text and post it into chat to see if the roll is the problem: Pasted into chat, this works fine. [[ (?{combatAttribute}+?{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1 ]] So therefore, your original roll should be fine as well: [[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1 ]] Another thing I try when I'm troubleshooting roll buttons, is to eliminate all the spaces. Might not matter, but sometimes I'm caught offguard when a space is interpreted the wrong way. Which leads to this: [[(@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1]]
1487286923
Silvyre
Forum Champion
[[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10! } &gt;?{Difficulty|6}f1 ]] I notice an unmatched curly bracket
Yeah the lack of a double bracket was something I caught afterwards but even with said double brackets it doesn't work. If I try to use it via the button it literally doesn't print anything. No error, nothing at all. If I try to paste it into chat I get an error: TypeError: Cannot read property 'substring' of undefined
1487287513

Edited 1487287607
Rin Vindor
Sheet Author
Even after fixing the missing curly bracket it still doesn't work. Still gives the same error. [[{(@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}&gt;?{Difficulty|6}f1]]
1487287606
plexsoup
Marketplace Creator
Sheet Author
API Scripter
Good catch, Silvyre! @Rin: Yeah, you can't paste it directly into chat, because chat doesn't know what character you're refering to. That's why I change the @s to ?s for that test.
1487287688

Edited 1487287810
Rin Vindor
Sheet Author
@plexsoup Yeah I know and when I change them to ? nothing gets posted in chat :| I properly type the Attribute and Ability names and nothing comes of it. The only way it works properly is if I just type in numbers when the prompts arise.
1487288033

Edited 1487288063
Silvyre
Forum Champion
I also see "value" misspelled as&nbsp;"valule" several times within the code posted earlier.
Well I feel retarded for that :| But of course even after fixing that &nbsp;it still produces nothing when the button is rolled.
Welp good news is I got it posting rolls finally \o/ thanks to you glorious people (I cannot believe (I can actually) that it was a damn typo). Now just gotta hunt down the next pesky bug but I think I got this one :)
I do have one last question I haven't been able to really find a good answer on. Is there a way to crease the size of the character sheet's width when it first opened up?
1487302373

Edited 1487303542
Rin Vindor
Sheet Author
Solved that with a very quick change to the .charsheet width in css. I'm still stuck on two things at this point one, how to change some of the boxes to use X instead of O it was setup that way but with all the tinkering its been a pain to figure out what precisely controls what. <a href="https://jsfiddle.net/mz3t0rpd/" rel="nofollow">https://jsfiddle.net/mz3t0rpd/</a>
1487308953

Edited 1487309003
plexsoup
Marketplace Creator
Sheet Author
API Scripter
For those fill in bubbles, you can change the content to anything you want. /* Styles unique to fake dot (checked or left of checked) */ #not-tab[type="radio"] + span::before { content: "X"; width: 12px; height: 12px; font-size: 18px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
Well the problem I am having is getting the square checkbox with the X to function again.