Markeer door de browser automatisch ingevulde velden die de gebruiker niet heeft bewerkt met CSS :autofill

Gebruik de css :autofill om velden te markeren die wel (of niet) automatisch zijn ingevuld, zodat de gebruiker het formulier correct kan invullen.

Hoe wordt dit geïmplementeerd

Als je een formulierveld wilt markeren dat automatisch is ingevuld door de browser (en niet is bewerkt door de gebruiker), voeg je een kiezer toe aan je CSS met de klasse :autofill. Dit kan worden gebruikt voor een <input>-, <select>- of <textarea>-element.

Als je automatisch ingevulde statussen opmaakt, moet je je houden aan de best practices voor toegankelijkheid:

• Meerdere statusindicatoren: Vertrouw niet alleen op de randkleur om de status van automatisch invullen aan te geven. Gebruik meerdere indicatoren, zoals randdikte en aangepaste achtergrondschaduw, om te zorgen dat de status waarneembaar is.
• Behoud focusindicatoren: Verwijder nooit focuscontouren (outline: none) zonder een duidelijke vervanging met een hoog contrast te bieden voor toetsenbordgebruikers.

In het volgende voorbeeld wordt :autofill gebruikt om een aangepaste rand en achtergrond in te stellen, samen met expliciete focusstijlen:

input:autofill,
input:-webkit-autofill {
  /* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}

/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

Zoals in dit voorbeeld wordt getoond, wordt de eigenschap box-shadow gebruikt om de achtergrond aan te passen, omdat background-color niet rechtstreeks kan worden overschreven in automatisch ingevulde velden.

Gebruik de juiste naam voor de CSS-pseudoklasse

Gebruik geen :auto-fill: dit is onjuist.

MANDATORY: Use :autofill as this is the correct pseudo-class name.

Reservestrategieën

De pseudoklasse :autofill is een progressive enhancement. In browsers die dit niet ondersteunen, werkt het formulier nog steeds normaal, maar krijgen de invoervelden geen aangepaste markering voor automatisch invullen. Gebruikers kunnen het formulier nog steeds invullen. Er mag geen aanvullende JavaScript-fallback worden gebruikt.