[HELP] Using CSS and checkboxes to disable elements on page

Hi, I am working on a sheet but I have run into an issue with a small formatting issue.  I am trying to use a checkbox to 'disable' fields on a character sheet I am working on.  I have tried examining the CSS wizardry post, and wiki, but could find nothing on how to perform what I desire. My HTML is: <label class="smlabel"> <input type="checkbox" name="attr_show_abilSpec" class="sheet-bigCheck sheet-disabled-input" value="@{abilSpec}"><br><span title="When selected the skill rolls as a specialty.  All Natural 10's count twice as successes.  THIS IS CURRENTLY NOT FUNCTIONING PROPERLY.">Specialty Skill</span></label> <label class="smlabel"> <input type="text" name="attr_abilSpec" class="sheet-disabled"><br><span>Specialization</span></label> And CSS is: .sheet-disabled-input:not(:checked) ~ .sheet-smlabel input.sheet-disabled { background-color: silver !important; color: dimgrey !important; pointer-events: none; } I have a feeling that my mistake is something relatively small, but I cannot figure out where I'm messing up.  Any help would be appreciated. EDIT: I cleaned the code to make it a little easier to read and removed un-needed style code.

Are you sure that's all what's relevant here? Because your CSS targets ` .sheet-textarea-gray ` but your HTML does not feature an element with this class. I have no idea what the label tags are meant to do in this case. Either way, no, it's not a small mistake. I cannot see what you actually want to achieve with the malformed HTML, but I can show you a simple working example on Codepen . Mind that the sibling selector requires the elements to be, well, direct siblings. You may also want to use the adjacent selector (+) instead of the general one (~). Edit: If you want the toggle to be played somewhere else in the HTML, just duplicate the checkbox but without the CSS classes. Roll20 will synchronize all checkboxes with the same name attribute for you. CSS .sheet-toggle:not(:checked) ~ .sheet-hide-me { display: none; } HTML <input type="checkbox" class="toggle" checked> <div class="hide-me">Attribute</div>

I am not trying to use the checkbox to show/hide a div section.  I am trying to use it to DISABLE  the input field.  I do not need the adjacent sibling selector because it is not immediately adjacent.  I am sorry if I was not particularly clear, its been a long night of work.  I have edited the code above to strip out uneeded fields and removed the styles from css code that are not specifically in the html example. Also, I see your edit.

Ah, I misread, though you can just use "pointer-events: none" instead. The element type is irrelevant with the class. Also, this will never work because your elements are not siblings. Labels do not share the state of (implicitly) linked inputs. The checkbox is wrapped in a different parent container (label) than the input it's supposed to affect. Either put them in the same or use a duplicate checkbox right before the target element (adjacent) and just make it invisible. How it needs to be: <parent> <child>ONE</child> <child>TWO (adjacent sibling of ONE)</child> <child>THREE (general sibling of ONE, adjacent sibling of TWO)</child> </parent> What you wrote: <label> <checkbox …> <span …>Specialty Skill</span> </label> <label> <input …> // Not a sibling of checkbox! <span> Specialization</span> </label>

pointer-events wont truly disable the input - a user can select it through tabbing through controls, for instance. You cant set disabled in roll20 with CSS. The way you would usually do this is to have two separate inputs, with the same name and value. One is disabled and the other is not. Then use your CSS to switch which one is visible.

I have seen it work in a character sheet before on one of the pathfinder sheets.  They used it for adding in attack/damage modifiers.  It caused the input to go gray and the user couldnt directly click on it and it toggled on and off.  I have tried to duplicate it as best I can, but it seems to have failed spectacularly.  For me the field remains gray if toggled on or off and I can click right through it.  Same browser, same OS.  I think I'm gonna put this down for a bit and come back to it. As for using tabstops to edit it; doesnt really matter to me, as long as it cannot be clicked on.