Re: [csswg-drafts] [selectors] :autofill pseudo-class (#5775)

I guess you are talking about styling inputs when the browser/user uses autocomplete, right? There already is a pseudo-class in CSS using `input:-webkit-autofill` but the code often gets ugly:

```css
input:-webkit-autofill {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 30px lightblue inset;
}
```

Having to deal with `-webkit-text-fill-color` and `-webkit-box-shadow` to change text and background colors is counter intuitive in addition to being hard to make it work on browsers like Chrome where you have to deal with the browser's default styling and make everything `!important`.

An `:autofill` pseudo-class in my opinion is a great idea if browsers allow us to do something like this:

```css
input:autofill {
  color: white;
  background-color: lightblue;
}
```

I found some [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#:~:text=input%20%7B%0A%20%20border%3A%203px%20solid%20grey%3B%0A%20%20border-radius%3A%203px%3B%0A%7D%0A%0Ainput%3A-webkit-autofill%20%7B%0A%20%20border%3A%203px%20solid%20blue%3B%0A%7D%0Ainput%3Aautofill%20%7B%0A%20%20border%3A%203px%20solid%20blue%3B%0A%7D) on developer.mozilla.org with a code example using `:autofill` but I couldn't find when the article was published. I tried using it in Chrome 90.0.4430.212 but it didn't recognise it (neither did VS Code).

I truely hope this becomes standard soon.

-- 
GitHub Notification of comment by Iconejey
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5775#issuecomment-854264422 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 4 June 2021 00:13:12 UTC