jQuery :password Selector

What You’ll Learn

The :password selector matches every <input type="password"> element — masked credential fields in login and signup forms. Available since jQuery 1.0; equivalent to [type=password]; always prefer input:password over bare :password.

Introduction

Login pages, account settings, and checkout flows almost always include at least one password field. jQuery’s :password pseudo-class selects every input whose type attribute is password — regardless of name, id, or placeholder text.

Official jQuery documentation notes that :password is equivalent to [type=password], but because it is a jQuery extension, modern browsers run native input[type="password"] faster. Always prefix with input — bare $(":password") implies $("*:password") and scans the entire document.

Understanding the :password Selector

Think of :password as a shortcut for password-type inputs only:

• input:password → masked credential fields (dots or bullets in the UI).
• input[type="text"] → visible plain text — different type, no match.
• input[type="password"][name="pwd"] → still matches :password.
• Does not select <textarea> or custom widgets — only input type="password".

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":password" )

// recommended — prefix with input:
$( "input:password" )
$( "#login-form input:password" )

// equivalent attribute form:
$( "input[type=password]" )

// native CSS (better performance):
document.querySelectorAll( 'input[type="password"]' )

// avoid on large pages:
$( ":password" )   // implies *:password

Parameters

• No arguments — keeps elements whose type is password.

Return value

• A jQuery object containing every matching password input (zero or more).

Official jQuery API example

var input = $( "input:password" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

Examples Gallery

Example 1 follows the official jQuery input:password demo. Examples 2–5 compare with attribute selectors, scope to a login form, highlight empty password fields, and use the native performance pattern.

var input = $( "input:password" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" ).text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

$( "form" ).on( "submit", function() { return false; } );

Password field(s) → yellow bg, red border
Message → "For this type jQuery found 1." in red
Text, textarea, button inputs → unchanged

console.log( ":password →", $( "input:password" ).length );
console.log( "[type=password] →", $( "input[type=password]" ).length );

:password → 1
[type=password] → 1 (identical matched set)

$( "#login input:password" ).css( "borderColor", "#2563eb" );

// #signup password fields unchanged

#login password → blue border
#signup password → default styling

$( "#auth" ).on( "submit", function( e ) {
  e.preventDefault();
  $( "input:password", this ).each( function() {
    $( this ).toggleClass( "error", !this.value );
  });
});

Submit with empty password → .error class (red outline)
After typing a value → error removed on next submit

// jQuery with native-friendly selector:
$( "input[type='password']" ).addClass( "secure-field" );

// Pure DOM (no jQuery pseudo-class):
document.querySelectorAll( "input[type='password']" );

Password inputs → .secure-field class
Works in querySelectorAll — no :password extension needed

🚀 Common Use Cases

• Login forms — select input:password for styling or validation.
• Signup flows — highlight confirm-password fields scoped to one form.
• Admin panels — count password fields before enabling submit.
• Accessibility — pair with labels via $("#form input:password").first().
• Security UX — toggle visibility buttons bound to password inputs only.
• Performance — prefer input[type="password"] in hot paths.

📝 Notes

• Available since jQuery 1.0 — equivalent to [type=password].
• jQuery extension only — not valid in native querySelectorAll(":password").
• Always use input:password — bare :password implies universal scan.
• Official performance tip — use input[type="password"] in modern browsers.
• Does not match text fields, hidden inputs, or textareas.
• Also included in the broader :input selector set.

💡 Best Practices