Autofill

Pseudo-class

:autofill

Selects form elements that have been autofilled by the browser.

Example

input:autofill {
  background: lightyellow !important;
  box-shadow: 0 0 0 100px lightyellow inset;
}

Specificity

0-1-0

Browser Support

Chrome, Safari, Firefox

About the Autofill

The :autofill CSS selector belongs to the Pseudo-class category.Selects form elements that have been autofilled by the browser. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.

The specificity of this selector is 0-1-0. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.

Browser support for Autofill is: Chrome, Safari, Firefox. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.

Related Selectors

:placeholder-shown :valid :focus