How do I modify custom colors in Accordion? (CSS/JS?)

Hi I am trying to change colours in accordion, I want .vc_tta-panel-title to be #C41E3A when it is active (open) or when hover, and text to become white.
I have been trying css (below) it changes to #C41E3A on hover but I cannot make it work when it is active. Please help.

.vc_tta-panel-title {
background-color: #ccc;
}
.vc_tta-title-text {
color: white;
}
.vc_tta-panel-title:hover {
background-color: #C41E3A;
}

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wpb-js-composer .vc_tta.vc_general .vc_active .vc_tta-panel-title>a {
	background-color:#C41E3A;
}

Best Regards

Thanks! it worked with a minor tweak :)))
initially I got confused because you had [>a] in your CSS, after I removed it all worked fine.
My final CSS is below.

How can I change the [+] and [-] signs in the Accordion to white?
Thank you for your help

.vc_tta-panel-title {
background-color: #778899;
}
.vc_tta-title-text {
color: white;
}
.wpb-js-composer .vc_tta.vc_general .vc_active .vc_tta-panel-title {
background-color:#C41E3A;
}

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts