SIGN UP

Highlight Form Field Upon Mouseover

By: David McCaleb | Asked: 03/14/2023
Forums › Category: Code Snippets › Highlight Form Field Upon Mouseover
0 Vote Up Vote Down
David McCalebDavid McCaleb asked 1 year ago
We have a strict ADA Compliance tool that wants our form fields to be more accessible. Is there a means to highlight fields upon mouseover? I am thinking of applying the same formatting as the active field to a field upon mouseover. Even better, I'd like to specify a different field outline and color for mouseover. Would anyone know custom CSS that could accomplish this? Many thanks!  
1 Answers
0 Vote Up Vote Down
Victor Font answered 1 year ago
To find the exact CSS classes that affect the field colors, use your browser's inspection tool. Once you locate the classes you want, add your CSS to Formidable's Custom CSS area. If you want to determine colors that meet WCAG .2.1 AAA contrast compliance, see this site: https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23FFFFEB%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%23851720%2C%20Dark%20Red%0D%0A%2374259e%2C%20Vivid%20Purple%0D%0A%23451269%2C%20Purple%0D%0A%23e1cbb1%2C%20Tan%0D%0A%23d2e9e9%2C%20Pastel%20Green%0D%0A%232448b0%2C%20Blue%0D%0A%23005d5c%2C%20Green&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa
David McCalebDavid McCaleb replied 1 year ago

Thank you! What about classes that don't exist? Using your instructions, there is "submit-hover-color" for the submit button, but no hover class for form fields. Suggestions? Many thanks.

Victor Font replied 1 year ago

Whether there's already CSS for hover or not, the pseudo classes exist. To create a hover class, you take the base class and add ::hover to it like this: .base-class::hover. Here's a link to a good explanation of pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

David McCalebDavid McCaleb replied 1 year ago

Thank you!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right