Accordion hover color

Hi,

I cannot change the accordion hover color. I want my hover color to be #73d0f4.

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #73d0f4 !important;    
}

I used this CSS to change color. It works, but the performance is very weak. Please help. You can find one of my accordions from here.

Hi,

Please try this CSS instead and let me know how it works:

.accordions-head:hover {
    border: 1px solid #73d0f4 !important;
}

Best Regards,
Csaba

Hi Csaba,

Thanks for your help! Your CSS works well. But not the way I prefer. The hover color now occurs when I put my mouse on the accordion, and it is #73d0f4. I love this unexpected effect. But when I click on the accordion, the hover color will change to the deep blue. Can I have a CSS to change that deep blue to #73d0f4 as well?

Hi,

You can change the active state with this Custom CSS:

.ui-accordion-header-active {
    border: 1px solid #73d0f4 !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Thanks for providing the CSS. It works, but not perfect. When clicking on the accordions, it will have a hover of deep blue (not #73d0f4), and the color #73d0f4 will pop up only when I clicking on other place once. May I have your follow up, please?

Hi,

Ah, I think you mean the outline, not the hover, that outline is from your browser, it’s not in CSS, but you can remove it with this Custom CSS:

*:focus {
    outline: none !important;
}

a:focus {
    outline: none !important;
}

input:focus {
    outline: none !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

WoW! It works perfect! thanks Csaba!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba