1. Home
  2. Forum
  3. Blazor
  4. Setting one background color and one color on the accordion

Setting one background color and one color on the accordion

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,



3 Replies
VM Vengatesh Maniraj Syncfusion Team September 1, 2020 10:41 AM UTC

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. 


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

Regards, 
Vengatesh  


TW Twalker September 1, 2020 03:01 PM UTC

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


VM Vengatesh Maniraj Syncfusion Team September 2, 2020 05:49 AM UTC

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. 


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

Regards, 
Vengatesh  


Loader.
Up arrow icon