The Chromium Project intentionally ignores standard W3C specifications by not honoring the autocomplete="off" attribute of forms and inputs when their heuristics discover credential fields.

Some credentials have nothing to do with the current domain, are not auto-fillable by browser password managers, and should not require developers to deploy workarounds like the auto-fill trap below.

<!-- Coerce browsers that ignore autocomplete="off"️ -->
<div class="visually-hidden">
    <input type="text" name="username" aria-label="Username" tabindex="-1" readonly>
    <input type="password" name="password" aria-label="Password" tabindex="-1" readonly>
</div>

Since Chrome only attempts to auto-fill the first set of credentials it finds, placing this at the top of our form effectively traps credential auto-fills.

The visually-hidden class is part of Bootstrap 5 (standalone version below). The tabindex="-1" attributes prevent tabbing into either field. The readonly attribute should prevent Chrome inserting actual credentials into either field.

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

Hope this helps 🙂