Validation icons don't appear on autocompleted fields because browsers set background-image: none !important.

[alionazherdetska]

Link to the GH issue: #5287

We need to decide between two approaches to fix the autofill validation icons issue:

1. SVG Element Solution

• Adds actual SVG elements in the DOM for validation icons
• Positioned absolutely to the input field
• Requires adding complex SVG markup to html

2. Mask Image Solution

• Uses CSS mask-image property with SVG data URLs
• Requires more CSS updates and maintenance
• Positioned absolutely to the input field

Required CSS to be added:

[oliverschuerch]

Your mask-image example can be created with the post-icon mixin (can show post and ui icons), so you only need to add additional styles to define the correct position of the icon within the input field.
You can change the icon size by setting font-size and the color by defining the color property on the .validation-icon element.

By the way, if you're using the selectors input.is-valid .validation-icon {...} and input.is-invalid .validation-icon {...} you can specify two different icons without the need for additional classes on the .validation-icon element.

[alizedebray]

I’d really prefer not to add an extra DOM element for the validation icons, as it could lead to inconsistencies and misuse of the component. However, one alternative could be setting the mask image on a ::before element within the .form-floating wrapper. At the moment, we don’t have a wrapper for non-floating label controls, but I would be more in favor of adding a wrapper like that than introducing a .validation-icon. We’ve had similar wrappers in the past (e.g., .form-group from Bootstrap), and this could also be useful for other purposes, such as controlling spacing.