So close to checkbox success, need help!

Due to my sheet using translations, I can't afford to make a standard 'fake checkbox'. You can't put translation tags in CSS as far as I know. What I Want: I am trying to put an <input> checkbox inside a styled span, so that a 'before','hover' and 'active' effect happens on the skill name along with the 'check'. The Problem: It seems as soon as I put the <input> inside the span, it no longer communicates to the <div> container that it is supposed to 'show/hide'. When the Input is outside of the span, it works just fine but then the skill name doesn't light up because the checkbox is 'hidden above it'.  <span data-i18n="brawlin-u" class="sheet-stat-roller">BRAWLING <input type="checkbox" checked='true' name='attr_brawling_dropdown' class="sheet-brawling-dropdown"></span> <div class='sheet-brawling-container'>Revealed Content!</div> span.sheet-stat-roller::before { content: " "; } span.sheet-stat-roller { background: none; margin-right: 5px; width: 150px; text-shadow: none; text-align: right; font-family: "Helvetica"; font-size: 10px; padding: 0!important; outline-color: transparent; border: none; font-weight: bold; box-shadow: none; z-index: 1; } span.sheet-stat-roller:hover { color: #5e0000; box-shadow: none; } span.sheet-stat-roller:active { color: #bc0000; box-shadow: none; } input[type="checkbox"].sheet-brawling-dropdown { opacity: 0; width: 150px; height: 15px; margin-right: 10px; left: 8px; margin: 0px -50px 0px 0px; position: relative; z-index: 0; } input.sheet-brawling-dropdown:checked ~ div.sheet-brawling-container { display: none; } You might laugh, but I have been working on this for two days! So hopelessly stuck, I feel terrible coming here to ask for help all the time. Sorry guys :(

Leothedino said: Due to my sheet using translations, I can't afford to make a standard 'fake checkbox'. You can't put translation tags in CSS as far as I know. You can...you use .lang-<two-character language code> (for example, .lang-de for German). For CSS the input needs to be at the same level as the item it's going to style, so putting your input inside a span breaks that.  You can overcome this by just creating a hidden version of that input field outside the span.

As Finderski says, you make a copy of the checkbox input, but type="hidden", with the class name you need, like <input type="hidden" name='attr_brawling_dropdown' class="sheet-brawling-dropdown" value="on"> Note: The value is set to match the default value of your checkbox. Then you can place copies of this hidden input wherever you need to make the CSS work.

Finderski said: You can...you use .lang-<two-character language code> (for example, .lang-de for German). Does that work in the same manner as the standard translations. You can put in one ID that adapts to all uploaded translation files? I thought you always needed the  data-i18n  tag.  I'll practice this and reply with progress. Thank you so much for the reply guys!

You can use translations within CSS by using the label attribute, which is luckily supported by Roll20, and the attr property. At least with pseudo-elements. Doesn't show up in the setting's preview but in the game. Mind that you need to add the translation key/value pair manually in this case as the auto mapping feature does not catch it. You will also need the appearance property to style the fake checkbox as outlined here ; who thought this would come in handy so quickly? Edit: See "Element Attribute Text" in the Translation Documentation . HTML <input type="checkbox" checked='true' name='attr_brawling_dropdown' class="sheet-brawling-dropdown" label="BRAWLING" data-i18n-label="brawlin-u" /> <div class='sheet-brawling-container'>Revealed Content!</div> CSS (changes) input[type="checkbox"].sheet-brawling-dropdown {     appearance: none;     outline: none;     border: none; } input[type="checkbox"].sheet-brawling-dropdown::after {     content: attr(label);     display: block;     width: 150px;     height: 15px; } Adjust it to your own needs.

Leothedino said: Finderski said: You can...you use .lang-&lt;two-character language code&gt; (for example, .lang-de for German). Does that work in the same manner as the standard translations. You can put in one ID that adapts to all uploaded translation files? I thought you always needed the&nbsp; data-i18n&nbsp; tag.&nbsp; I'll practice this and reply with progress. Thank you so much for the reply guys! I'm not sure I'm totally following what you're goal is, and Tetrakern sounds much more knowledgeable than I (their example is way over my head, atm), but there are several ways to skin this cat...just need a little more explanation of what you're trying to accomplish (an example in what would be seen could help). &nbsp;So, possible options: What Tetrakern mentions Use a sheet worker (I've done this for some things where I wanted a skill name to be pre-filled with the language of choice equivalent) CSS language specific styling (maybe...like I said, need to understand the problem a little better), but you can read more about that here:&nbsp; <a href="https://wiki.roll20.net/Character_Sheet_Translation#Changing_Language-Specific_Looks" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Translation#Changing_Language-Specific_Looks</a>

Ah, my apologies&nbsp; Finderski . I find this super confusing, myself. Know what I want to say, just don't have the technical language to say it. The best TL'DR I can try is: I want this skill's name to work as a checkbox and have a 'highlight' effect when I hover over and click on it, but still get translated automatically like the rest of the sheet. I did the trick you said about putting the 'hidden' version of the HTML line outside of the box (example below), it didn't work either. :(&nbsp; &lt;span data-i18n="brawlin-u" class="sheet-stat-roller"&gt;BRAWLING &lt;input type="checkbox" checked='true' name='attr_brawling_dropdown' class="sheet-brawling-dropdown"&gt;&lt;/span&gt; &lt;input type="hidden" name='attr_brawling_dropdown' class="sheet-brawling-dropdown" value="on"&gt; &lt;div class='sheet-brawling-container'&gt;Revealed Content!&lt;/div&gt; span.sheet-stat-roller::before { content: " "; } span.sheet-stat-roller { background: none; margin-right: 5px; width: 150px; text-shadow: none; text-align: right; font-family: "Helvetica"; font-size: 10px; padding: 0!important; outline-color: transparent; border: none; font-weight: bold; box-shadow: none; z-index: 1; } span.sheet-stat-roller:hover { color: #5e0000; box-shadow: none; } span.sheet-stat-roller:active { color: #bc0000; box-shadow: none; } input[type="checkbox"].sheet-brawling-dropdown { opacity: 0; width: 150px; height: 15px; margin-right: 10px; left: 8px; margin: 0px -50px 0px 0px; position: relative; z-index: 0; } input.sheet-brawling-dropdown:checked ~ div.sheet-brawling-container { display: none; } Tetrakern said: You can use translations within CSS by using the label attribute, which is luckily supported by Roll20, and the attr property. At least with pseudo-elements. Doesn't show up in the setting's preview but in the game. Mind that you need to add the translation key/value pair manually in this case as the auto mapping feature does not catch it. You will also need the appearance property to style the fake checkbox as outlined here ; who thought this would come in handy so quickly? Edit: See "Element Attribute Text" in the Translation Documentation . HTML &lt;input type="checkbox" checked='true' name='attr_brawling_dropdown' class="sheet-brawling-dropdown" label="BRAWLING" data-i18n-label="brawlin-u" /&gt; &lt;div class='sheet-brawling-container'&gt;Revealed Content!&lt;/div&gt; CSS (changes) input[type="checkbox"].sheet-brawling-dropdown { &nbsp; &nbsp; appearance: none; &nbsp; &nbsp; outline: none; &nbsp; &nbsp; border: none; } input[type="checkbox"].sheet-brawling-dropdown::after { &nbsp; &nbsp; content: attr(label); &nbsp; &nbsp; display: block; &nbsp; &nbsp; width: 150px; &nbsp; &nbsp; height: 15px; } Adjust it to your own needs. I attempted to try this example as well, I opened up a test game (as you mentioned preview wouldn't work) and it didn't function (picture below).

Did you also enter a translation? Because this looks like a missing translation for [brawling-u]. As soon as you add a "data-i18n" attribute, you need to add a translation key/value pair or it will show the missing translation string instead. I should have made this more clear. TRANSLATION { "brawling-u": "BRAWLING" } As for your issue with hover and click, this would be done with :hover::after and :active::after . The pseudo-classes select the state, which is then transferred to the pseudo-element that simulates the label. Like this: input[type="checkbox"].sheet-brawling-dropdown:hover::after { &nbsp; &nbsp; color: #5e0000; } input[type="checkbox"].sheet-brawling-dropdown:active::after { &nbsp; &nbsp; color: #bc0000; } Click to play gif:

Tetrakern &nbsp;it works! Oh my goodness, I am over the moon -and- I now understand how it works . Thank you so much for your patience, to everybody for replying and helping me!&nbsp;