CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rishi
Rishi

Reputation: 419

Style password filled input

In most modern browsers, you can fill the password from stored data. And when you do that in some browsers I have noticed that the background color of the input changes. Instead of having the background color change, I have a different style in mind for that purpose.

How do I apply a style to the password field when the browser fills it?

Javascript and Jquery(not preferred), is ok to use.

Upvotes: 1

Views: 216

Answers (1)

C.Unbay
C.Unbay

Reputation: 2826

The browsers use cookies to save that kind of data for later use. They probably even give the cookie an Id event, and when that eventId occurs, they run some javascript/css code to change the view of the page.

You can use addEventListener() function and make your own configurations on how you would like to change the view and in what exact conditions you would like to change it.

For example:

//if.cookie.exists => cookieFilled()

You need to have knowledge of how cookies work, depending on your back-end programming language.

Javascipt function on changing the looks, configure it as you like.

myInput.addEventListener("cookieFilled", function(){
 myInput.style.backgroundColor = "yellow"; //background
 myInput.style.color           = "black";  // color of the text 
 console.log(myInput.type) //should return "password" if it is a password type     
}, false);

If you want to know more about events in javascript please see here

You can trigger them by using dispatchEvent() function.

Upvotes: 3

Related Questions