How can we hide STEP Circles with CSS?

.wpcf7cf_multistep .wpcf7cf_steps-dots {
  display: none;
}

Here’s some (still basic) information about styling: https://conditional-fields-cf7.bdwm.be/docs/faq/styling/

Yes, you hide dots with some CSS:

.wpcf7cf_multistep .wpcf7cf_steps-dots .dot {
    padding:0;
    height: 0;
    overflow: hidden;
}

I don’t have any extensive documentation about this because you can achieve almost any visual modification with some basic CSS knowledge. The trick is to inspect the element with developer tools, and find you selectors and modify the rules accordingly.

This should work:

.wpcf7cf_multistep .wpcf7cf_steps-dots .dot {
    border-bottom: 5px solid green;
}

(pretty sure this will work, but I didn’t test it..)

EDIT:

And for the active and completed steps:

.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active,
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed {
    border-bottom: 5px solid green;
}

• This reply was modified 4 years, 6 months ago by Jules Colle.