CSS font family issue with autofill within a text input

Question

I'm trying to set a monospace font to an input, but when autofill kicks in, and switching between autofill dropdown menu options, the font family within that autofill state of the text input doesn't appear as the specified monospace font, please refer to this code and change font family to monospace to portray my issue(I'm using Chrome btw): Codepen example by CSS tricks

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* PRESENTATIONAL STYLES */
body {
  background: #333;
  color: #fff;
  display: flex;
  font-family: monospace;
  font-size: 3em;
  justify-content: center;
}

form {
  padding: 50px 0;
  width: 50%;
}

<form>
  <div class="form-group">
    <label for="exampleInputFirst">First Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputFirst">
  </div>
  <div class="form-group">
    <label for="exampleInputLast">Last Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputLast">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email Address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail">
  </div>

  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

According to MDN, _“The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.”_ - that still applies to the input field itself, _not_ the automatically created dropdown the browser itself renders for the autofill functionality. I am pretty sure what you want is not possible; this is basically the same thing as with for example the automatic tooltip you get for a `title` attribute - you can not format that either. — 04FS, May 17 '19 at 10:57
I'm not trying to change the dropdown list, I'm having the issue with the rendered text within the text input while switching values from the dropdown autofill list, the font family switches from a monospace(as specificied by the css rule) to a default one. — Ozymandias, May 17 '19 at 12:32
This is the same issue as described in https://stackoverflow.com/q/56026043/1709587, and is ultimately a side effect of the fix to a [security bug](https://bugs.chromium.org/p/chromium/issues/detail?id=916838) I reported, shipped the month before this question was asked. — Mark Amery, Jan 03 '20 at 14:59

score 25 · Answer 1 · answered Dec 22 '19 at 23:42

25

The solution here is input:-webkit-autofill::first-line selector.

It allows you to override default system font (and font size) during mouseover on autocomplete elements.

answered Dec 22 '19 at 23:42

Alexander Lerner

251
3
2

I'm not sure why `input:-webkit-autofill` doesn't work, but `input:-webkit-autofill::first-line` does, but IT WORKS! Thank you! Chrome is the new Internet Explorer. It seems like 20% of my workload lately is trying to work around Chrome's annoyances. – Gavin Apr 15 '21 at 11:17
Works for me Too. TY – Edgaras Aug 21 '21 at 18:26
3

No longer working for me on macOS Chrome Version 95. The reason Chrome removed autofill font face styles was down to a security concern https://bugs.chromium.org/p/chromium/issues/detail?id=1035058. `::first-line` was a trick to workaround their initial bandaid "fix", but they've fixed our workaround now also. Of note, Chrome 96 will support `:autofill` https://www.chromestatus.com/feature/5592445322526720 but I'm not sure to what degree Chrome will let us style it. – Kerry Johnson Nov 04 '21 at 17:43

score 9 · Accepted Answer · answered May 17 '19 at 18:47

Here is my partial answer in hopes of helping:

I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.

From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.

Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.

It seems to be intentional, but maybe it's a bug, it is a bit annoying because of design inconsistencies, **Firefox works** as expected(it doesn't even show text within the text input while hovering over a dropdown option). I wish I could override this, I'm just going to disable autocomplete. — Ozymandias, May 17 '19 at 22:22

CSS font family issue with autofill within a text input

2 Answers2