Change Color of Plus Sign (instead of Arrow) to expand the Accordion?

I found some great code that easily and perfectly changes the color of the arrows to expand the accordion, but I can't find the right word to swap with '.arrow' in this code snippet below to change the color of the plus sign option. I've tried '.plus' and '.cross' etc...but can't figure it out! Anyone know what Squarespace calls the plus sign on the back-end? Thank you 🙂

/* accordion arrows color */
.accordion-block .arrow {
    border-color: #ffff00 !important;
}

4 hours ago, pieperpieper said:

I found some great code that easily and perfectly changes the color of the arrows to expand the accordion, but I can't find the right word to swap with '.arrow' in this code snippet below to change the color of the plus sign option. I've tried '.plus' and '.cross' etc...but can't figure it out! Anyone know what Squarespace calls the plus sign on the back-end? Thank you 🙂

/* accordion arrows color */
.accordion-block .arrow {
    border-color: #ffff00 !important;
}

Can you share link to page where you use accordion? We can check easier

Thanks - but I don't know how to make my site not private / log in when in development?

2 hours ago, pieperpieper said:

Thanks - but I don't know how to make my site not private / log in when in development?

You can setup password & share url

yeah that was much easier than I expected - thanks.

Here's the link:
https://alpaca-tetra-nxtp.squarespace.com/rentals

Pass: smores

If you scroll down to the first set of rentals (Cameras) - you'll see the red Arrows next the (default) black Plus signs.

Appreciate your help!

6 hours ago, pieperpieper said:

yeah that was much easier than I expected - thanks.

Here's the link:
https://alpaca-tetra-nxtp.squarespace.com/rentals

Pass: smores

If you scroll down to the first set of rentals (Cameras) - you'll see the red Arrows next the (default) black Plus signs.

Appreciate your help!

I see you solved with this CSS

.accordion-block .arrow {
    border-color: #d64127 !important;
}

Yes I was able to change the ARROW color to red - but I don't want to use the arrows. I want to use the PLUS option instead...and I can't figure out how to change that color to red. I'm sure I just need to change the '.arrow' to something else in the CSS...but I can't figure out what Squarespace calls the PLUS sign on the back-end...?

anyone else have a hint on this? I've tried looking everywhere online - simply cannot find this answer anywhere 😞

With plus, need this code

div.accordion-block .plus {
    color: red;
}

Thanks @tuanphan - that's what I needed!!

Care to educate me as to why the need to add 'div.' before 'accordion.block'?

I was expecting every bit of the CSS to stay the same except for the name of 'arrow' or 'plus'...since it's basically just swapping that one alternate option that is already offered by Squarespace.

My mind is broken....

19 hours ago, pieperpieper said:

Thanks @tuanphan - that's what I needed!!

Care to educate me as to why the need to add 'div.' before 'accordion.block'?

I was expecting every bit of the CSS to stay the same except for the name of 'arrow' or 'plus'...since it's basically just swapping that one alternate option that is already offered by Squarespace.

My mind is broken....

You can add, or don't add. They are same.

I added because I'm afraid of when you copy code, you missing dot before class name