How to change background colour on click tab active in splunk dashboard?

[karthi2809]

Hi Guys,

Thanks in Advance,

How to changes background colour when i am click on the tab should be active.Now its showing active on click.But now i want to change the background colour as well on clicking on the tab.

          #input_link_split_by.input-link button{
            width: 120px !important;
            border-top-color: rgb(255, 255, 255);
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: rgb(255, 255, 255);
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: rgb(255, 255, 255);
            border-left-style: solid;
            border-left-width: 1px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }

[danspav · Accepted solution]

Hi @karthi2809,

Try this CSS:

#input_link_split_by {width:fit-content!important;}
#input_link_split_by.input-link button{
    width: fit-content!important;
    margin-right:2px;
    background-color: #3c444d;
    border-top-color: #3c444d;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: #3c444d;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-color:#3c444d;
    border-left-style: solid;
    border-left-width: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: background-color 0.5s ease;
    transition: border-color 0.5s ease;
}


#input_link_split_by button:hover{
    background-color:#d2e3a0;
    border-right-color: #d2e3a0;
    border-top-color:#d2e3a0;
    border-left-color:#d2e3a0;
    color: black;
}

#input_link_split_by button[aria-checked="true"]{
    background-color: #d2e3a0;
    color: black;
}

That gives you tabs that keep their colour after you have selected them:

The key bit is: 

#input_link_split_by button[aria-checked="true"]

Which is the CSS to identify a selected tab.

Cheers,
Spav