SOLVED! Change Colour of Completed Step

Get Help
1

Hi,

I have seen this posted a few times without resolution.

Screenshot 2026-01-29 141741

I am able to change the colour of all other CSS, but cannot find the selector for changing the completed step colour. The documentation here does not seem to have it Multi-Page Forms CSS Selectors - Gravity Forms Documentation google searches don’t seem to result in any helpful advice.

Any ideas?

Cheers

2

Hi there,
Could you please share your webpage URL so I can check and try to give you the specific CSS code which will help to change the color?

5

Sorry, I’m not giving my website URL out on a forum. Did it once then people were harassing my clients. Never again. It is the same on every Gravity Forms site that uses steps. There are three other people who asked this question, and all of their posts go unanswered on this forum, so I have logged a support request, and if and when I get the answer, I will post it here.

6

Finally figured it out!!

Gravity Forms uses ::before and ::after pseudo-elements to create the visual appearance of the step circles/numbers. These pseudo-elements sit on top of the regular background, so even though my CSS was technically being applied to the span element, you couldn’t see it because the pseudo-elements were covering it with their own styles.

The fix was to target the pseudo-elements directly instead of just the parent span. Here’s the CSS that finally worked:

css

/* Force override pseudo-elements on completed steps */
.gf_page_steps .gf_step_completed > .gf_step_number::before,
.gf_page_steps .gf_step_completed > .gf_step_number::after {
    background-color: #242A56 !important;
    background: #242A56 !important;
    border-color: #242A56 !important;
    border: 2px solid #242A56 !important;
    color: #FFFFFF !important;
}

Just replace #242A56 with whatever colour you want for your completed steps. Hope this helps someone else dealing with the same issue.

1 Like
7

Sorry to hear that. I’m glad to see you’ve already found the solution.

Have a nice day!

1 Like