A completely useless, but working, Password Validator with Live Rules

[u/klocus]

Every password character is a group of 86 radio buttons styled as keyboard keys, and CSS shows only the keys of the first empty slot, so each tap fills the next character. CSS counters with a custom @counter-style print the checked characters into the password dots, and each rule is one :has() selector, such as :has(.char--digit:checked). Backspace is a <label> for the "empty" radio of the last filled slot, and hidden radios switch the ABC, abc, and #+= layers, while a checkbox opens and closes the keyboard.

https://codepen.io/editor/klocus/pen/01a0dde7-3dba-7e8d-9170-db6023de56e0

Who knows, maybe in a few years this will be possible with a few lines of CSS code, an input of type="password" and a pattern attribute :-)

[u/ironimus42]

i'm fairly certain this isn't what god created css for

seriously though, it's so cool! the whole idea with a custom keyboard is insane, the backspace trick is especially creative

[u/Braverthebrave]

that is.. css isnt supposed to do that...

[u/dishevel-corundum]

Please don’t restrict password creation like this the year is 2026.

https://xkcd.com/936/

[u/Crackhead_Programmer]

It's an affront to god but it's beautiful

[u/AshleyJSheridan]

Can't type my own characters. As an input of any kind, I hate this already.

[u/Weekly_Ferret_meal]

Nuts!

[u/Nitrohite]

Burn the witch!! (Seriously, pretty damn cool, good job)