Setting one background color and one color on the accordion

[Twalker]

Hi,

I have tried the example at the following location, https://www.syncfusion.com/forums/146079/accordions-background-color and it does change the colors, but not in all cases.

I would like to change all background colors to the same and all color to the same (though I might then modify it once I get that working to be slightly different on mouse over) and the example only changes it for sometimes, but not other times.

How can I set the background-color and color so that it doesn't change back on some movement, activity, open, close, etc?

thank you,

[Vengatesh Maniraj]

Hi Daniel, 

Greetings from Syncfusion Support. 

We have validated your requirement “Setting one background color and one color to the Accordion” and we can achieve this by overriding the below CSS classes. 

<style> 

 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, 

    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header, 

    .e-accordion .e-acrdn-item.e-select > .e-acrdn-header, 

    .e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header, 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:focus, 

    .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus { 

        background-color: bisque; 

    } 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover, 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon,  

    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon, 

    .e-accordion .e-acrdn-item .e-toggle-icon{ 

        color: brown; 

    } 

    

</style> 

For your reference, we prepared the sample that can be available in the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/157456/ze/SyncfusionBlazorAccordion1183310029  

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[Twalker]

Thank you,

This works except in the case where I mouse over the header text.

[Vengatesh Maniraj]

Hi Daniel, 

Thanks for the update. 

We have achieved the hovering actions too by overriding the below CSS classes. 

    .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons, 

    .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content { 

        color: brown; 

    } 

 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons, 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-icons, 

    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content { 

        color: brown; 

    } 

 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-icons, 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-icons, 

    .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-acrdn-header-content { 

        color: brown; 

    } 

For your reference, we modified the sample that can be available in the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/157456/ze/SyncfusionBlazorAccordion-1696961986 

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 

Vengatesh