Underline a Label by clicking on it

Hello, I’m using a custom and revised version of Thierry Mattray’s Pendragon 5th Edition character sheet, which I have personally updated to make it compatible with Pendragon 6th Edition. Now, for those familiar with Pendragon, one of the core character features is the Personality Traits. Depending on the religion or ideal a character follows, some traits become more important than others. I’d like to implement a feature where clicking on a trait’s label underlines it, maybe using some kind of hidden checkbox. Could anyone tell me how to do this? I assume it will require both HTML and CSS. I should also add that the character sheet only works with Legacy Sanitization enabled. This is the section of HTML code I’m currently using and would need to modify. It’s fairly rough, but it works well enough for my purposes: <button type='roll' name='roll_Test-TCha' value='/em @{MYNAME} rolls CHASTE. \n/roll 1d20+[[{{@{TCha}+?{modif|0},0}>21}*(@{TCha}+?{modif|0}-20) + 0]]<[[@{TCha}+?{modif|0}]] \ CHASTE roll @{TCha} modif. ?{modif|0}'></button> <input style='display:inline; margin-left: 10px; margin-right: 10px;' type='checkbox' name='attr_CB-TCha' value='1' /> <label style='display:inline-block; width:70px; color:black;'>Chaste*</label> <label style='display:inline-block; text-align:left; width:45px; font-size:9px; color:#0f75bb;'>R,C</label> <input style='display:inline; text-align:center; font-weight:bold;' type="number" name="attr_TCha" class="sheet-carac2" value="10" /> <label style='display:inline-block; width:30px; text-align:center;'>/</label> <input style='display:inline; width:35px; text-align:center; font-weight:bold;' type="text" name="attr_TLus" class="sheet-carac2" value="20-(@{TCha})" disabled="true" /> <label style='display:inline-block; width:45px; text-align:right; font-size:9px; color:#0f75bb;'>Pa</label> <label style='display:inline-block; width:70px; text-align:right; color:black;'>Lustful</label> <input style='display:inline; margin-left: 10px; margin-right: 10px;' type='checkbox' name='attr_CB-TLus' value='1' /> <button type='roll' name='roll_Test-TLus' value='/em @{MYNAME} rolls LUSTFUL. \n/roll 1d20+[[{{@{TLus}+?{modif|0},0}>21}*(@{TLus}+?{modif|0}-20) + 0]]<[[@{TLus}+?{modif|0}]] \ LUSTFUL roll @{TLus} modif. ?{modif|0}'></button>

not sure what section of that html in particular you want to modify, but this is a basic application of checkbox driven styling. I would do it something like this: <label class="activation-label"> <input type="checkbox" name="attr_your_attribute_name" value="1" class="activation-control" hidden> <span>text here</span> </label> <label class="activation-label"> <!-- you can also use an attribute backed span if the text needs to be dynamic based on some other attribute --> <input type="checkbox" name="attr_your_attribute_name" value="1" class="activation-control" hidden> <span name="attr_some_attribute_name">text here</span> </label> [hidden]{ display: none !important; } .activation-checkbox{ /* generic styling goes here */ &:has(.activation-control:checked){ /* style as you want for activated goes here */ border-bottom: 1px solid black; } &:has(.activation-control:not(:checked)){ /* styling for not activated goes here. */ /* or just put it in the generic if the checked stated is going to override it. */ } }

Thanks, ! The label I need to modify is simply the text “Chaste.” As you’ve probably guessed from my code, I’m not exactly a programmer — I just muddle through... I've tried to modify the code you gave to me, but I'm not exactly getting it.  Can you help me? That's the original line I need to modify. <label style='display:inline-block; width:70px; color:black;'>Chaste*</label> That's how it appear. I do not have a CSS class to make it appear like it, so keeping the style part is important:

Ok, I think I managed to modify it a bit, but the text is static and not selectable. I don’t understand why…

Davidek28 said: Thanks, ! The label I need to modify is simply the text “Chaste.” As you’ve probably guessed from my code, I’m not exactly a programmer — I just muddle through... I've tried to modify the code you gave to me, but I'm not exactly getting it.  Can you help me? That's the original line I need to modify. <label style='display:inline-block; width:70px; color:black;'>Chaste*</label> That's how it appear. I do not have a CSS class to make it appear like it, so keeping the style part is important: You'll use the first html label in my example: <label class="activation-label"> <input type="checkbox" name="attr_your_attribute_name" value="1" class="activation-control" hidden> <span>Chaste*</span> </label> Use the same css I gave to you previously.

I've done as you asked me. That's the result. And it's not even toggleable. Have Legacy Sanitization something to do with it?

Ok. For who is in need of a similar code, I found the solution with Gemini. That's the HTML: <input type='checkbox' name='attr_Toggle-Chaste' class='sheet-toggle-highlight' id='toggle-chaste' /> <label class='sheet-clickable-label' style='width:70px; color:black; text-align:left; margin-bottom: -1px;' for='toggle-chaste'>Chaste</label> That's the CSS /* === START: UNIVERSAL YELLOW HIGHLIGHTER === */ /* Hides Control checkbox */ .sheet-toggle-highlight { display: none !important; } /* Normal Toggleable text*/ .sheet-clickable-label { display: inline-block; cursor: pointer; transition: background-color 0.2s ease; vertical-align: middle; } /* Hovering Effect */ .sheet-clickable-label:hover { opacity: 0.7; } /* When the previous checkbox is checked, highlight the text in yellow. */ .sheet-toggle-highlight:checked + .sheet-clickable-label { background-color: #ffd700 !important; /* Gold Background */ color: #000000 !important; /* Black Text */ font-weight: bold !important; border-radius: 4px; padding: 0 4px; } /* === END: UNIVERSAL YELLOW HIGHLIGHTER === */

using the for property will be finicky on R20 sheets. If you ever want to use this in repeating sections you won't be able to use the for property and will need to use the nested method. And, yes, if you are using legacy sanitization, it won't work.