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!
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
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
Thank you!
Please login or Register to submit your answer