how to change the color of an accordion item?
Application Type
Traditional Web
I'm trying to change an accordion item so that it turns green when the fields are filled in, but I can't edit the colors

In your browser, right click Inspect and see the css of your accordion. You will see this is the css that allows you to change it:


Hello @Rafael Moreira again,

You can use the class "background-green" to add background color green or "text-green" to add the text green.

Hope it helps,

NunoR

Hello Rafael Moreira,

if you want to change the background color for title side

to get above result add this css in your application 

.section-expandable .section-expandable-title {

    background-color: green;

}


To change background color of the expendable area of accordion item as shown below Image

.section-expandable .section-expandable-content-expanded, .section-expandable .section-expandable-content.is--expanded {
    background-color: green;
   
}

Used this CSS to your application screen level 

Thanks and Regards,

Akshay Deshpande


Hello @Rafael Moreira,

Can you share want OML? Or an image with you want to achieve.

The accordion item donĀ“  t have fields.

Best regards,

NunoR

actually i would just like to change the accordion item color to green

Hello @Rafael Moreira again,

You can use the class "background-green" to add background color green or "text-green" to add the text green.

Hope it helps,

NunoR

It turns out that when I try to edit  I come across this situation 

dúvida.png

In your browser, right click Inspect and see the css of your accordion. You will see this is the css that allows you to change it:


Hello Rafael Moreira,

if you want to change the background color for title side

to get above result add this css in your application 

.section-expandable .section-expandable-title {

    background-color: green;

}


To change background color of the expendable area of accordion item as shown below Image

.section-expandable .section-expandable-content-expanded, .section-expandable .section-expandable-content.is--expanded {
    background-color: green;
   
}

Used this CSS to your application screen level 

Thanks and Regards,

Akshay Deshpande


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.