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!

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

See your relevant APM services, dashboards, and alerts in one place with the updated ...

As a Splunk Observability user, you have a lot of data you have to manage, prioritize, and troubleshoot on a ...