CSS :autofill Pseudo-Class

CSS :autofill Pseudo-Class

The CSS :autofill pseudo-class selects input fields that have been automatically filled by the browser. It allows you to apply special styles to autofilled form controls until the user edits their values.

:autofill Syntax

input:autofill {
  property: value;
}

The :autofill pseudo-class is added directly to an input selector without a space. It has no arguments.

Example Syntax

input:autofill {
  border: 2px solid #2e7d32;
  outline: 2px solid #2e7d32;
}

This example adds a green border and outline to an input field that the browser has autofilled.

The selector does not match a field simply because it contains text. The value must have been filled automatically by the browser and must not have been subsequently edited by the user.

How :autofill Works

Browsers can remember information such as names, email addresses, and contact details. When a user chooses a saved suggestion, the browser can fill one or more form fields automatically.

An input matches :autofill when its current value was supplied by the browser's autofill feature and the user has not edited that value.

When the Selector Matches

Once the user edits an autofilled field, the selector stops matching that field, even if the user changes the text back to the same value.

The exact appearance and timing of browser autofill suggestions can vary between browsers and operating systems.

Autofill and the autocomplete Attribute

The HTML autocomplete attribute tells the browser what kind of information a form field expects. This can help the browser offer appropriate saved values.

HTML Example

<form>
  <label for="full-name">Full Name</label>
  <input type="text" id="full-name" name="full-name" autocomplete="name">
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" autocomplete="email">
</form>

The values name and email identify the expected information. If the browser fills either field using saved information, that input may match :autofill.

The autocomplete attribute does not guarantee that autofill will occur. Browser settings, saved information, and user interaction determine whether the browser offers or fills values.

Likewise, a browser may autofill a field even when an explicit autocomplete attribute is not present.

Browser Styling Restrictions

Some browsers apply their own background and text colors to autofilled fields. These browser styles may use declarations that take precedence over ordinary author styles.

For example, changing background-color or color on an autofilled input may not produce the expected result in Chromium-based browsers.

Using a Border and Outline

input:autofill {
  border: 2px solid #2e7d32;
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

Border and outline styles provide visible feedback without depending on overriding the browser's autofill background color.

Using an Inset Box Shadow

input:autofill {
  box-shadow: 0 0 0 100px #e8f5e9 inset;
}

An inset box shadow can visually cover the browser's autofill background. This technique may work where changing background-color directly does not.

When using an inset shadow, verify that the field's text remains readable and that the browser's focus indicator is still visible.

The :-webkit-autofill Selector

The :-webkit-autofill pseudo-class is a vendor-prefixed alias for :autofill. It remains useful for compatibility with browser versions that recognize the prefixed form.

CSS Example

input:autofill,
input:-webkit-autofill {
  border: 2px solid #2e7d32;
}

Both selectors apply the same border to browser-autofilled inputs when supported.

Including both forms provides compatibility with older implementations while using the standard :autofill selector.

The prefixed selector is not a separate autofill state. It represents the same browser-filled condition.

Related Form Pseudo-Classes

The :autofill pseudo-class describes how a field received its value. Other form pseudo-classes describe validity, requirements, focus, and editability.

A field can match several of these pseudo-classes at the same time. For example, an autofilled email input may also match :focus, :required, and :valid.

Best Practices

• Use :autofill to provide a subtle visual distinction for browser-filled fields.
• Include :-webkit-autofill when compatibility with older browser implementations is important.
• Do not assume that an input with a value automatically matches :autofill.
• Keep autofilled text readable when customizing borders, outlines, or background effects.
• Preserve visible focus indicators for keyboard users.
• Use appropriate autocomplete values to help browsers recognize form fields.
• Test autofill with actual saved browser information rather than only manually typing values.
• Make sure the form remains usable when the pseudo-class is unsupported.

:autofill Example

The following example highlights name and email fields when the browser fills them automatically. Manually entering text does not activate the :autofill selector.

HTML

<form class="autofill-demo">
  <label for="demo-name">Full Name</label>
  <input type="text" id="demo-name" name="name" autocomplete="name">
  <label for="demo-email">Email Address</label>
  <input type="email" id="demo-email" name="email" autocomplete="email">
</form>

CSS

.autofill-demo label {
  display: block;
  margin: 12px 0 5px;
}
.autofill-demo input {
  width: 100%;
  padding: 10px;
  border: 2px solid #999;
  border-radius: 4px;
}
.autofill-demo input:autofill,
.autofill-demo input:-webkit-autofill {
  border-color: #2e7d32;
  box-shadow: 0 0 0 100px #e8f5e9 inset;
}
.autofill-demo input:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

Browser Result

Select a saved name or email address from your browser's autofill suggestions. If the browser autofills a field, it receives a green border and a light green background effect. Editing the value removes the autofill state.

Note: This example requires browser autofill data. The appearance may not change if the browser has no saved information or does not offer autofill in the embedded example.

Play in Editor

Browser Support

The :autofill pseudo-class has limited availability and is not Baseline across all widely used browsers. The prefixed :-webkit-autofill selector can improve compatibility. For browser details, visit Can I Use? and search for CSS :autofill.

Specifications

The :autofill pseudo-class is defined in Selectors Level 4 and the HTML Living Standard.

Selectors Level 4 - The :autofill Pseudo-Class

HTML Living Standard - :autofill