We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Accordion`s background color

Thread ID:

Created:

Updated:

Platform:

Replies:

146079 Jul 18,2019 08:58 PM UTC Jul 24,2019 05:01 AM UTC Blazor 5
loading
Tags: Accordion
Társis
Asked On July 18, 2019 08:58 PM UTC

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 [Syncfusion]
Replied On July 19, 2019 11:54 AM UTC

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.  
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
Replied On July 19, 2019 06:40 PM UTC

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 [Syncfusion]
Replied On July 22, 2019 12:45 PM UTC

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. 
 
<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
Replied On July 22, 2019 02:02 PM UTC

It worked. Tank you very much!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On July 24, 2019 05:01 AM UTC

Hi Tarsis,   

We are happy that our solution fulfilled your requirement. 

Please let us know for further assistance. 

Regards, 
Karthi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon