Daily Challenge #11 : The "CSS-Only" Password Strength Meter 🔑

It is February 23rd. Today, we are building a piece of security UI that actually reacts to user input, .no JavaScript allowed.

The Mission

Build a password input field with a visual "strength meter" (a bar that changes color and width) based on how many criteria the user has met.

The Rules 🚫

1. NO JavaScript Allowed : No regex testing in scripts or event listeners.
2. Pure CSS/HTML only : Use the pattern attribute on the HTML <input> tag combined with the :valid or :invalid pseudo-classes.
3. The Logic : The meter should have at least 3 stages: Weak (Red), Medium (Yellow), and Strong (Green).

The Goal 🏆

The meter should update in real-time as the user types. For example, the bar could grow longer or change color only when the input matches a specific complexity pattern.

Pro Tip : You can use multiple hidden requirements (like "contains a number") and use the :placeholder-shown pseudo-class to hide/show specific hints until the user starts typing.

---

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If you add a "Show/Hide Password" toggle using the checkbox hack.
• Extra Credit : If the strength meter has a smooth CSS transition between colors.

Have fun!