Autofill hover font size

HTML & CSS
1

Hi there,

I am trying to change the hover font size when users are using the autofill in webkit browsers.

For example, when a user hovers over an item in their autofill list, the font appears small than when it is selected.

Hover:
image

Selected:
image

Is there an attribute in CSS that will control this?

Currently I have:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #01abab inset !important;
     color: #fff!important;
    font-size: 18px;
}
input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    font-size: 18px!important
}

But it doesn’t seem to effect the hover.

Any ideas how I can change this?

Thanks!

2

How is the font size going to change if you specify it as 18px in all cases?

2 Likes
3

Hi,

Thanks for the reply.

I do not want the size to change, that is the problem I’m having :slight_smile:

I would like it to remain 18px when it is hovered and also when it is selected in the field.

4

Problem could be that you’re missing the semicolon ; in your input:-webit-autofill { on the last bit there. Try putting that in and see if it’s better.

5

@Gandalf good point, just saw your reply

6

Are you talking about this autofill extension for Chrome or the autocomplete feature in the browser?

7

Thanks for the reply.

Where is the missing semicolon? Maybe I am being silly but I can’t see it.

8

Hi @toolman it’s in this css bit

image

9

Do you mean the last line?

I have changed it to this, but still no luck:

input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    font-size: 18px!important;
}
1 Like
10

The last semicolon is optional and will make no difference.

Can you direct me to the autofill you are using?

1 Like
11

It’s just the default one in Chrome that I am referring to

12

Try this

input:-webkit-autofill::first-line {
  font-size: 24px;
}

It’s not guaranteed to work everywhere.

1 Like
13

Thank you, that worked perfectly :slight_smile:

14

Can I Use says this about -webkit-autofill :

image
image1656×783 69.4 KB

1 Like
15

Thanks, that is useful :slight_smile:

16

You’re welcome :slight_smile: . Sure is.

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.