Design Issues Due to Overlapping Icons in Input Field

[MohamadSalman11]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In the registration form below, the Avira icon (a key) shows up in input fields when Avira Autofill is on to use saved data. This causes the tick icon and the Avira icon to overlap.This happens when you use Avira and Autofill is enabled, but it can also occur in other scenarios if you use a software that displays an icon or something similar in the input field

When not validated:

When validated:

Reduced test cases

None

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.3.3

[siddhesh-wagh]

Customizing Avira Autofill Behavior
In some cases, you may want to disable Avira Autofill for certain fields. This can be done using the autocomplete attribute in HTML, which prevents browsers or third-party password managers from automatically filling in input fields.

html
Copy code
input type="text" name="username" autocomplete="off"

However, this may not always work with all password managers or might reduce usability, so use this option carefully.

[MohamadSalman11]

Customizing Avira Autofill Behavior In some cases, you may want to disable Avira Autofill for certain fields. This can be done using the autocomplete attribute in HTML, which prevents browsers or third-party password managers from automatically filling in input fields.

html Copy code input type="text" name="username" autocomplete="off"

However, this may not always work with all password managers or might reduce usability, so use this option carefully.

Thank you for your solution, Siddhesh. This will definitely work when we disable the autocomplete, and it will also solve issue #40879. However, if the developer decides to enable autocomplete for their project, the problem will resurface. We might need to include the tick icon not as an input background-image, but in some other way. But your solution will definitely work. Thank you! 😊"