CSS for Checkboxes

[Software-Simian]

Hello,

i have checkboxes that will serve as filters. Now i want to color code the Text next to the checkbox NOT the Label on top. I already got that working:

#input_severity_low {
text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px darkgreen;
font-variant: small-caps;
}

Howeverthis really only affects the label over the checkbox. I want the Text of (next to) the checkbox to be altered.

My Web-Analyzer shows me something like:

<label data-test="label" for="clickable-ae3424f7-85da-4201-9152-a98bf237f15d" data-size="medium"
class="SwitchStyles__StyledLabel-tie4e6-7 hGDbnW">
4 - Low (<some number>)</label>

However the CSS Syle does not react to the class.

Anyone any ideas?

Kind regards,

Mike

[ITWhisperer · Accepted solution]

You can select which text you want to change by its value e.g. "4 - Low (<some number>)" or by its position  index e.g. 3

        <style>
          #checkbox_input_id div[data-test-value="4 - Low (<some number>)"] label {
            color: red !important;
          }
          #checkbox_input_id div:nth-child(3) label {
            color: green !important;
          }
        </style>

[Software-Simian]

Awesome thanks!!

was actually child(2) but anyhow works like a charme!!

Thanks,

Mike