jQuery :password Selector

Beginner
5 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is :password?

:password selects every element of type password — usually <input type="password">. Official docs: equivalent to $("[type=password]"). Available since jQuery 1.0.

Not CSS / jQuery extension

Prefer input[type="password"] for native querySelectorAll speed. Always write input:password — bare :password implies *:password.

Remember
$("input:password")           → recommended
$("[type=password]")          → equivalent (official)
$("input[type='password']")   → best for modern browsers

$(":password")                → means *:password (avoid)

<input type="password">  → matches
<input type="text">      → no match
NeedPrefer
jQuery learning / demos$("input:password")
Native performance$("input[type='password']")
Plain text fields$("input:text")
Approach

How to Use :password

Prefix with input, scope to a form when you can, then read or style the match.

  1. Write input:password (not bare :password).
  2. Scope to a form when the page has many fields: $("#login input:password").
  3. For speed in modern browsers, use input[type="password"].
  4. Never log real password values in production — use length or presence checks in demos.
PieceRequired?Role
input prefixRecommendedAvoids universal *:password scan
:passwordYesKeeps type=password controls
Form contextOftenLimits matches to one form

Pseudocode

Pseudocode
candidates = find("input")   // or CSS attribute query
result = empty

for each el in candidates:
    if el.type == "password":
        keep el

return jQuery(result)
Reference

Cheat Sheet

Keep these facts handy while selecting password fields.

TopicDetail
Syntax$("input:password")
Equivalent$("[type=password]")
Native / fast$("input[type='password']")
vs :textMasked password vs plain text
Bare :passwordImplies *:password — avoid
CSS?No — jQuery extension
SincejQuery 1.0
Try it

Live Preview

Run selectors on a small form with text, password, and other controls.

Official idea: find password inputs among mixed form controls. Demo reports count and names only (not values).

Result
$("input:password")
matched: 2
names: pwd, pin

/* type=password only */
Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Demo: input:password

Count password inputs in a mixed form (jQuery API example idea).

jQuery
var $input = $("input:password");
console.log("For this type jQuery found " + $input.length + ".");
console.log("names:", $input.map(function () {
  return this.name || "(no name)";
}).get().join(", "));
Try It Yourself

How It Works

  1. Match password inputs. input:password keeps type=password only.
  2. Ignore other controls. Text, checkbox, select, and button are skipped.
  3. Report the count. Official demo prints how many were found.
  4. Use names, not values. Safer for demos than logging secrets.

Example 2 — Same as [type=password]

Official docs: the pseudo-class and attribute selector return the same set.

jQuery
var $a = $("input:password");
var $b = $("[type=password]");
var $c = $("input[type='password']");

console.log(":password →", $a.length);
console.log("[type=password] →", $b.length);
console.log("input[type=...] →", $c.length);
console.log("same size:", $a.length === $b.length && $b.length === $c.length);
Try It Yourself

How It Works

  1. Three spellings. All target type=password.
  2. Same length. Matched sets agree.
  3. Attribute form is CSS. Best for native performance.
  4. Pick one style. Prefer attribute syntax in new production code.

Example 3 — Prefer input:password

Bare :password implies the universal selector — prefix with input.

jQuery
console.log("input:password →", $("input:password").length);
console.log(":password →", $(":password").length);
console.log("same here:", $("input:password").length === $(":password").length);
Try It Yourself

How It Works

  1. Typed form. Official recommendation: precede with a tag.
  2. Bare form. Means *:password — wider scan.
  3. Same on tiny demos. Counts often match by coincidence.
  4. Habit. Always write input:password on real pages.

Example 4 — :password vs :text

Masked password fields and plain text fields are different types.

jQuery
console.log("password:", $("input:password").map(function () {
  return this.name;
}).get().join(", "));

console.log("text:", $("input:text").map(function () {
  return this.name;
}).get().join(", "));

console.log("overlap:", $("input:password").filter("input:text").length);
Try It Yourself

How It Works

  1. Password set. Only type="password".
  2. Text set. Only type="text" (see :text).
  3. No overlap. Intersection length is 0.
  4. Pick by control. Use the selector that matches the field type.

Example 5 — Scope to One Form

Limit matches so other forms on the page are ignored.

jQuery
var $login = $("#login input:password");
var $all = $("input:password");

console.log("login form:", $login.map(function () {
  return this.name;
}).get().join(", "));
console.log("all page:", $all.map(function () {
  return this.name;
}).get().join(", "));
console.log("filled length:", $login.val().length);
Try It Yourself

How It Works

  1. Scoped query. #login input:password stays inside one form.
  2. Page-wide query. Also picks up pin in another form.
  3. Length check. Demo reports .val().length, not the secret itself.
  4. Production tip. Always scope validation to the submitted form.

Edge Cases & Pitfalls

Check these before relying on :password in real projects.

prefix

Avoid bare :password

Official docs: bare form implies *:password. Always write input:password.

css

jQuery extension only

Not in querySelectorAll. Prefer input[type="password"] for native speed.

scope

Multiple forms

Page-wide queries can style or validate password fields you did not intend — scope to a form id.

security

Do not log secrets

Avoid console.log($("input:password").val()) in real apps. Check emptiness or length instead.

Compatibility

Browser Support

:password is a jQuery extension (not CSS), available since 1.0. Equivalent attribute matching with input[type="password"] works in native querySelectorAll.

✓ jQuery 1.0+ · Extension

jQuery :password

Works in all browsers with jQuery. Prefer input[type="password"] for native CSS performance.

100% jQuery environments
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
:password jQuery + attr CSS

Bottom line: Use input:password in jQuery tutorials; prefer input[type="password"] when performance matters.

Analysis

Performance Notes

ApproachCostBest for
$("input[type='password']")Native QSAOfficial recommended pattern
$("input:password")Sizzle path (no QSA)Learning / small pages
$("#form input:password")Smaller scoped setMulti-form pages

Official docs: because :password is not CSS, use [type="password"] in modern browsers for the native performance boost.

Remember

Key Takeaways

  • Role: select type="password" inputs.
  • Prefix: write input:password, not bare :password.
  • Equivalent: same set as [type=password].
  • Perf: prefer input[type="password"] in modern browsers.

One line: :password means “password-type inputs” — prefix with input, prefer the attribute form for speed.

Frequently Asked Questions

:password selects every element of type password — typically <input type="password">. $("input:password") finds all password fields in scope. Available since jQuery 1.0.
Yes. Official docs: $( ":password" ) is equivalent to $( "[type=password]" ). For native querySelectorAll speed, prefer input[type="password"].
Prefer $("input:password"). Bare $(':password') implies the universal selector ($('*:password')). Official docs recommend preceding it with a tag name.
No. It is a jQuery extension. Native querySelectorAll cannot run :password. Use input[type="password"] for standard CSS matching.
:password matches masked password inputs. :text matches plain text inputs. They never overlap.
It styles $("input:password") and reports how many were found in a sample form that also includes text, textarea, checkbox, radio, select, and button controls.

Next: :image Selector

Select image-type inputs used as graphical submit buttons.

:image tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

jQuery :file Selector jQuery :image Selector