twbs
Design Issues Due to Overlapping Icons in Input Field
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] 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
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.
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! 😊"
IMO, it should not be a bootstrap's problem! That reported behaviour is due to a 3rd party service, not from browser and neither the OS. It is the plugin that should take care of such issues.
