Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you’re not seeing things. The Avada team wrapped the required identifier (asterisk *) with an abbreviation(<abbr>) element to provide screen readers with a readable element. Unfortunately, they didn’t take into account that many browsers have a text-decoration dotted underline as the default styling of the abbreviation. The simple fix is just to override the styling. I submitted a feature request to do away with this because the form is already accessible using the required and aria-required attributes.

abbr.fusion-form-element-required {
    text-decoration: none;
}

Originally published on Sept. 5, 2022

man in blue crew neck shirt covering his faceRemove RankMath Annoyance
Colorful Vespa scoot parked in front of a brick wallPlugin Possibilities - Webyx

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read Hiding sticky header on scroll down

    Quick tip for hiding your stick header on scroll down.

    December 24, 2022

  • Read Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

    October 29, 2022

  • Read Remove RankMath Annoyance

    Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

    September 3, 2022

  • Read List of Links

    List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

    August 21, 2022

  • Read Border between columns

    Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

    August 16, 2022