In your browser open the inspector and look at your tabs. The active tab will have an added class ‘active’ to the active tab:
Rewrite the code to:
.mx-name-customTabContainer{
li .active{
background: #ffb500;
color:white;
}
In your browser-inspector you can try out your select by clicking Console-tab and type $(‘li .active’)
Click the to make the browser take you to what he found.
NBs. – beware of typos like in your line7 ‘cuustom’, this wil break the code
- use a css editor (VisualStudioCode for instance) to auto-style your css files.
- Don’t remove questions. Leave them for others to learn from.
Use the below code to set the color for active tab
mx-name-tabPage17 – This is the name of your tab inside the tab container.
.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a.mx-name-tabPage17 {
background: #0066cc !important;
color: White !important;
font-weight: bold;
border-style: solid;
border-color: #0066cc;
background-color: #0066cc !important;
}
Below code will set the color during page load.
.mx-name-tabContainer2 .mx-name-tabPage12 {
background: #BEBEBE ;
color: White !important;
border-style: solid;
border-color: #ff9900;
}