Override browser form-filling and input highlighting with HTML/CSS

html

responsive-design

best-practices

accessibility

byAnton Shumikhin·Sep 29, 2024

Conquer browser auto-fill by applying autocomplete="new-password" on input fields. Erase input glow using CSS commands: outline:none; and box-shadow:none;. Tailor focus states with :focus:

<input type="text" autocomplete="new-password" style="outline:none; box-shadow:none;" />

<style>
  input:focus {
    border: 2px solid blue; // Who doesn't like a touch of blue?
  }
</style>

These nifty maneuvers stop unwanted form-filling suggestions and adjust the focus outline to seamlessly blend with your design.

Master browser-specific styling

Handling Chrome's whims

Battling with Chrome's autofill styles? Fret not. Some developers found a solution using the -webkit-autofill pseudo-element. This allows you to target the autofill style directly. Make sure to apply !important, taking precedence over other CSS rules.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  border: 1px solid #ced4da; // Because borders matter
  -webkit-text-fill-color: black !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Be aware, Chrome's latest versions may not support this workaround forever. So, stay updated.

Battling the strong shadow

An inset box-shadow that's large enough to cover the entire field can act as a background-color, overriding the yellow autofill. This "strong" shadow trick keeps your inputs looking crisp, regardless of autofill:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset; // Shadow so strong, it needs its own dumbbell
}

Oversee form behavior

Turning autocomplete off

To stop a form from auto-completing, you can disable this feature by applying autocomplete="off":

<form autocomplete="off">
  <!-- form elements here -->
</form>

Sadly, modern browsers might ignore this plea, especially with sensitive data like passwords or email fields due to UX trade-offs.

Focus and hover for style consistency

Make sure your :hover and :focus states match the rest of your form:

input:hover, input:focus {
  background: white;
  color: black;
}

Consistency is key. This extra mile prevents any style change surprises when users interact with the form.

Think cross-browser consistency

Testing across various browsers and devices is crucial. The variances between browser implementations and levels of support can lead to different user experiences.

Ensuring accessibility and text readability

Plain sight against autofill

It might be necessary to make sure the text color stands out against your chosen background colors:

input:-webkit-autofill {
  -webkit-text-fill-color: black !important; // Black like my morning coffee
}

Remember to double-check the readability of your text on autofill.

Use !important sparingly

Although !important seems like an easy answer to override browser styles, use it sparingly. Frequent use can lead to tricky debug and update processes, making it harder to maintain your CSS.

Respect user convenience

Designing forms should be convenient for the users and support accessibility. While altering form behavior can improve the UX, it shouldn't compromise accessibility. Attach :focus-visible pseudo-class and all necessary ARIA tags to ensure optimum web usability.

explain-codes / Html / Override browser form-filling and input highlighting with HTML/CSS

Linked

Google Chrome form autofill and its yellow background



Remove inner shadow of text input



Change Select List Option background color on hover



Styling the text input caret



How do I set a background-color for the width of text, not the width of the entire element, using only CSS?

