David McCaleb asked 2 years 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!
Victor Font Staff answered 2 years 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 McCaleb
replied 2 years 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.
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
Please login or Register to submit your answer
