CODEWITHSUNDEEP
csstextinput
FlawlessCalamity
FlawlessCalamity

Reputation: 135

How to style Text input after clicking a google chrome auto complete suggestion?

I'm having a little trouble, I cant seem to find/use the right pseudo class and was hoping some one here might be able to tell me which would be the correct one.

My issue is that google chrome has your previous values which you have inputted into the text input, which is great and all but I can't seem to get my styling right if you click one of the suggestions. My styling works fine in all other aspects of the text input but when you select an option from chrome's list of previous values the background of my text input goes blue, which I don't want. I have tried :active, :visited, and a few others, but I think i'm using the incorrect classes.

Please can some one help me out, I just can't seem to find the right thing.

Thanks.

Upvotes: 1

Views: 1281

Answers (2)

Adil Ahmed
Adil Ahmed

Reputation: 435

Add this to your css, and add the desired styles to it.

/* 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;
}

Check out this article, to learn more.

Upvotes: 0

Dan Knights
Dan Knights

Reputation: 8368

For webkit browsers you can use -webkit-autofill:

input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover, 
input[type="text"]:-webkit-autofill:focus, {
   color: blue;
   background: red;
}

Check this article out for more info.

Upvotes: 1

Related Questions