Question 277312 in Html Question posted in
Some basic documentation can be found here.

How to override default styles when selecting from default autocomplete values in an HTML5 input?

It’s been a long while since I’ve dealt with this, and today it seems there are a few quirks across browsers. How do you remove all the styles when you are selecting an autocomplete result from an <input type="email" />?

In Safari it looks like this (note: I don’t have any yellow or green styles in my app):

In Chrome it looks like this (has blue and uses a font I don’t have specified in my CSS, notice how the text is small and unstyled before fully selecting it):

How do I control all these styles? I would like for it to just be white in all cases for now (background white), and the text to be the same style in all states (placeholder is slightly lighter gray text, but that’s it).

I tried styling input:focus::placeholder {} but that doesn’t seem to do anything related to these things that are happening. I tried input:active which is what I would think is the state when selecting an autocomplete value, but no go. Any ideas?

Here is my complete input if that makes a difference:

<input id="email" name="email" type="email" required="" autocapitalize="off" autocorrect="off" placeholder="Your best email" style="min-width: 100%;" data-gtm-form-interact-field-id="0">

I don’t know where data-gtm-form-interact-field-id is coming from, that is what I get when copying outerHTML from the web inspector.

Update

As per @Qyriad’s :autofill suggesion, I got this far:

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: var(--color-base-background) !important;
  color: fieldtext !important;
}

input:-webkit-autofill::first-line {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

input:auto-fill {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

input:-webkit-autofill {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

But still the font style isn’t working… Appears to be a bug.

Tags:

2

Answers


  1. 0

    I think you are looking for the :autofill CSS pseudo-class.

    Login or Signup to reply.
  2. 0 
    /* Use this code to customize the appearance of autofill inputs, including 
the background and border colors. */

/* Works for Chrome, Edge, and Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  /* Transitions the background color over 5000s */
  transition: background-color 5000s;
  /* Changes text color to black */
  -webkit-text-fill-color: #000 !important;
  /* Adds a 1px black border and removes the outline */
  border: 1px solid black;
  outline:none;
}

/* Works for Firefox */
input:-moz-autofill {
  /* Changes text color to black */
  -moz-text-fill-color: #000 !important;
  /* Adds a 1px black border and removes the outline */
  border: 1px solid black;
  outline:none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search