Is there any way to change the colour of an active tab?

0
Hi everyone, I have a page the has a tab container. On each of these tabs the background is a different colour, I was wondering if there is any possible way to make the active tab the same colour as the background for that particular tab. I’ve attached a screenshot below to show example of what I’m trying to do. I want to make the background of the tab “Test 1” the same colour as the background below it (#E6E6FA).
asked
3 answers
1

to make it different per tab, you can change the sass shown and add a nth selector

.mx-tabcontainer {
    &>.mx-tabcontainer-tabs {

        li:nth-of-type(1) {

            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                background-color: red;
            }
        }
        li:nth-of-type(2) {

            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                background-color: blue;
            }
        }
    }
}

 

answered
2

Hi Nathan, if you are familiar with editing style for your application via SASS, you can solve it this way:

 

.mx-tabcontainer {
    &>.mx-tabcontainer-tabs {

        li {

            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                background-color: #E6E6FA;
            }
        }
    }
}

 

answered
0

Hi Nathan,

In my project also we have same requirement.
Could you please let me know how to add the SCSS in the application.

Regards

Sreenivas

answered