CSS :autofill

Autofilling HTML input elements is a frequent user action that can drastically improve user experience. Hell, we all autofill for our passwords and address information. But what control do we have when input elements have been autofilled? To add custom CSS styles to inputs whose contents have been autofilled by the browser, you can use […]

The post CSS :autofill appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh

Autofilling HTML input elements is a frequent user action that can drastically improve user experience. Hell, we all autofill for our passwords and address information. But what control do we have when input elements have been autofilled?

To add custom CSS styles to inputs whose contents have been autofilled by the browser, you can use the :autofill pseudo-class:

input:autofill {
    border: 2px solid orange;
}

I’m really happy that browsers allow site and app developers to customize the styling of elements that have been changed by the browser. Autofill, to a degree, is an unnatural act, so signaling to that the value in an input was changed without control is important.

Since different browsers and operating systems sometimes style autofilled elements differently, :autofill is hugely beneficial!

The post CSS :autofill appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh


Print Share Comment Cite Upload Translate Updates
APA

David Walsh | Sciencx (2022-09-22T01:47:49+00:00) CSS :autofill. Retrieved from https://www.scien.cx/2022/09/22/css-autofill/

MLA
" » CSS :autofill." David Walsh | Sciencx - Thursday September 22, 2022, https://www.scien.cx/2022/09/22/css-autofill/
HARVARD
David Walsh | Sciencx Thursday September 22, 2022 » CSS :autofill., viewed ,<https://www.scien.cx/2022/09/22/css-autofill/>
VANCOUVER
David Walsh | Sciencx - » CSS :autofill. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/22/css-autofill/
CHICAGO
" » CSS :autofill." David Walsh | Sciencx - Accessed . https://www.scien.cx/2022/09/22/css-autofill/
IEEE
" » CSS :autofill." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2022/09/22/css-autofill/. [Accessed: ]
rf:citation
» CSS :autofill | David Walsh | Sciencx | https://www.scien.cx/2022/09/22/css-autofill/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.