Dashboards & Visualizations

CSS for Checkboxes

Software-Simian
Path Finder

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

Labels (1)
Tags (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

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>

 

View solution in original post

ITWhisperer
SplunkTrust
SplunkTrust

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
Path Finder

Awesome thanks!!

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

 

Thanks,

Mike

0 Karma
Get Updates on the Splunk Community!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Enhance Security Operations with Automated Threat Analysis in the Splunk EcosystemAre you leveraging ...

Splunk Developers: Go Beyond the Dashboard with These .Conf25 Sessions

  Whether you’re building custom apps, diving into SPL2, or integrating AI and machine learning into your ...

Index This | How do you write 23 only using the number 2?

July 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...