From b7f2433fd3f6df390836f0af9474d0ec2cc341d6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 30 Oct 2025 23:41:29 +0000
Subject: [PATCH] Fixes the CSS selectors for the password strength indicator
 to correctly display the password strength.

---
 Password-Strength-Checker/style.css | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/Password-Strength-Checker/style.css b/Password-Strength-Checker/style.css
index 86af3bf9..06125ccb 100644
--- a/Password-Strength-Checker/style.css
+++ b/Password-Strength-Checker/style.css
@@ -136,11 +136,7 @@ input[type="password"]::placeholder {
 }
 
 /* Strength levels with solid colors */
-input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength {
-  background: #ffe0e0;
-}
-
-input:invalid:not(:placeholder-shown) ~ .strength {
+input:focus:invalid ~ .strength {
   background: #fff8e1;
 }
 
@@ -161,11 +157,7 @@ input:valid ~ .strength {
 }
 
 /* Optional */
-input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength::after {
-  background: #f57c00;
-}
-
-input:invalid:not(:placeholder-shown) ~ .strength::after {
+input:focus:invalid ~ .strength::after {
   background: #d32f2f;
 }
 
@@ -174,7 +166,7 @@ input:valid ~ .strength::after {
 }
 
 /* Trigger animation when password is being typed */
-input:not(:placeholder-shown) ~ .strength::after {
+input:focus ~ .strength::after {
   transform: scaleX(1);
 }
 
@@ -189,12 +181,7 @@ input:not(:placeholder-shown) ~ .strength::after {
   transition: opacity 0.3s ease;
 }
 
-input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength-text {
-  opacity: 1;
-  color: #d32f2f;
-}
-
-input:invalid:not(:placeholder-shown) ~ .strength-text {
+input:focus:invalid ~ .strength-text {
   opacity: 1;
   color: #f57c00;
 }