How to override CSS styles in classic forms

  • Resolved J Werk

    (@jwerk13040)


    1 year, 7 months ago

    With the Donation Visual Form Builder, CSS styling is different than with the legacy form builder.

    I can’t figure out how to style the focus state (keyboard outline) on Donation Amount buttons on a Classic form. By default, the keyboard outline is hidden which is bad for accessibility. I think this CSS rule needs to be overriden:

    @layer base {
    :focus-visible {
    outline: none;
    }
    }
    I’ve tried to add specificity but without luck.

    @layer base {
    :focus-visible {
    outline: 3px solid #000 !important;
    }
    }

    How can I override this default CSS rule and make a visible outline?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Robin Joshua Del Mundo

    (@robindelmundo)

    1 year, 7 months ago

    Hi @jwerk13040 ,

    Glad you reached out! Happy to help.

    Forms made using the Visual Form Builder load inside an iframe to prevent theme styles from interfering with them, however this also makes them trickier to customize.

    To override the CSS code of a form, make sure to insert your CSS code in the Custom Styles section in the Design tab of the Visual Form Builder — https://share.zight.com/L1u2Pkqr.

    Please let me know if you have further questions.

    I’m always happy to help!

    Thread Starter J Werk

    (@jwerk13040)

    1 year, 7 months ago

    OK, this worked for me.

    Thanks for the explanation.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to override CSS styles in classic forms’ is closed to new replies.