Confusing title probably I know. Basically the situation I'm looking at is that I want to change my checkbox inputs in some cases to the side/down arrow format and tie it in with the hidden field options so basically my players can fill in custom moves but they're not always staring at a huge text block when they don't need/want to. However, I'm also using checkboxes elsewhere to mark taken moves, Harm/Stress levels, etc. So the problem I'm running into is when I put in the CSS code to hide checkboxes to change them over to the side/down arrow icons, it of course hides all the checkboxes in the sheet. Which is what it's designed to do I suppose. However, I still need to utilize regular checkboxes elsewhere in the sheet. So is there a way to differentiate them in the code somehow with a name or class tag that I'm missing somewhere? HTML <div><input type="checkbox" class="arrow" /><span></span><input type="text" placeholder="Move Name" />
<div class="body">
<input type="text" placeholder="Description" /><br>
<textarea placeholder="Fulltext"></textarea>
</div></div>
<input type="checkbox"> CSS /* Fake checkbox */
input[type="checkbox"] + span::before
{
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "▼";
width: 14px;
height: 14px;
font-size: 12px;
}
input[type="checkbox"]:checked + span::before
{
content: "►";
}
input.arrow
{
float: left;
}
input.arrow:checked ~ div.body
{
display: none;
}
/* Hide actual checkbox */
input[type="checkbox"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
