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>
The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em , ex , and so forth.
The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.
Add the CSS * (asterisk) selector to select all the elements of the document. Set the font-size, font-family, line-height, and color properties.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With