Changeset 60988 for trunk/src/wp-admin/css/forms.css

Timestamp:

10/20/2025 07:47:31 PM (5 months ago)

Author:

joedolson

Message:

Login and Registration: Add Caps Lock notice to password input.

Add a notification when typing passwords on the user registration, user login, and user profile screens that notifies the user if they are typing with caps lock enabled.

This can help reduce user friction when logging in, prevent user error when creating passwords, and reduce the need for a user to use the show password button.

Props dartiss, swissspidy, johnbillion, nikunj8866, pmbaldha, mosescursor, sirlouen, westonruter, praful2111, devsabbirahmed, kawsar007, najmulsaju, yashyadav247, sajjad67, joedolson.
Fixes #48345.

File:

• trunk/src/wp-admin/css/forms.css (modified) (2 diffs)

trunk/src/wp-admin/css/forms.css

@@ -714 +714 @@
 }
 
+/* Caps lock warning */
+.wp-pwd .caps-warning {
+    display: none;
+    position: relative;
+    background: #fcf9e8;
+    border: 1px solid #f0c33c;
+    color: #1d2327;
+    padding: 6px 10px;
+    top: -8px;
+}
+
+.profile-php .wp-pwd .caps-warning {
+    padding: 3px 5px;
+    top: -4px;
+    border-radius: 4px;
+}
+
+.wp-pwd .caps-icon {
+    display: inline-flex;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.wp-pwd .caps-warning-text {
+    vertical-align: middle;
+}
+/* Caps lock warning */
+
 p.search-box {
     display: flex;
@@ -1641 +1672 @@
     }
 
+    .profile-php .wp-pwd .caps-warning {
+        padding: 8px;
+    }
+
     .password-input-wrapper {
         display: block;