Accordion`s background color

[Társis]

Good evening,

how do I change Accordion`s background color? Or better, what do I do in order to make Accordion assume the parent component background color?

Thanks in advance!

[Arun Palaniyandi]

Hi Társis, 

Thank you for contacting Syncfusion support. 

You can change the Accordion’s both header and content background color using CSS properties and we have prepared a sample for the same with background color customizations in Accordion for your reference.  

https://www.syncfusion.com/downloads/support/forum/146079/ze/Accordion-Blazor175090306 

And like wise you can also apply the parent component’s color to the Accordion UI, using the below class names and CSS properties. 

 

<style> 

  

    .e-accordion {
        border-radius: 6px 6px 6px 6px;
        border: none !important;
    } 

        /* header custom css*/
        .e-accordion .e-acrdn-item .e-acrdn-header {
            background-color: rgb(255, 204, 255);
            border-radius: 6px 6px 6px 6px;
        } 

            /*header on hover custom css*/
            .e-accordion .e-acrdn-item .e-acrdn-header:hover {
                background-color: rgb(255, 51, 255);
            } 

        /*header on selected and expanded custom css*/
        .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
            background: rgb(255, 204, 255);
        } 

  

        .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
            background: rgb(255, 128, 255);
        } 

  

        .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
            background: rgb(255, 204, 255);
        } 

  

        /*content custom css*/
        .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
            background-color: rgb(222,238,172);
            border-radius: 6px 6px 6px 6px;
        } 

  

</style> 

Output: 

 

 

Please let us know if you need further assistance.  

Regards,  

Arun P.  

[Társis]

Thank you for your answer,

I could manage to change the background color of the headers, but now a thin white line appears between them. How can I avoid that? And how can I change the header text color (I'm talking about the not active ones)

Thanks in advance!

[Arun Palaniyandi]

Hi Társis, 

Thank you for your update. 

We have achieved your requirement to remove white line between headers and to change the inactive header text color in the below attached sample. 

https://www.syncfusion.com/downloads/support/directtrac/146079/ze/Accordion-Blazor1759837208 

 

<style> 

  

    .e-accordion {
        border-radius: 6px 6px 6px 6px;
        border: none !important;
    } 

        /* header custom css*/
        .e-accordion .e-acrdn-item .e-acrdn-header {
            background-color: rgb(255, 204, 255);
            border-radius: 6px 6px 6px 6px;
        } 

            /*header on hover custom css*/
            .e-accordion .e-acrdn-item .e-acrdn-header:hover {
                background-color: rgb(255, 51, 255);
            } 

        /*header on selected and expanded custom css*/
        .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
            background: rgb(255, 204, 255);
        } 

  

        .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
            background: rgb(255, 128, 255);
        } 

  

        .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
            background: rgb(255, 204, 255);
        } 

  

        /*content custom css*/
        .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
            background-color: rgb(222,238,172);
            border-radius: 6px 6px 6px 6px;
        } 

 

/*to remove the white line*/ 

        .e-accordion .e-acrdn-item.e-select {
            border-bottom: 1px solid white !important;
            border-top: 1px solid white !important;
        } 

 /*to change the accordion header color*/ 

        .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
            color: yellowgreen;
        } 

 

  

</style> 

 

 

Please let us know if you need further assistance.  

Regards,  

Arun P.  

[Társis]

It worked. Tank you very much!

[Karthigeyan Krishnamurthi]

Hi Tarsis,   

We are happy that our solution fulfilled your requirement. 

Please let us know for further assistance. 

Regards, 

Karthi