jQuery :image Selector

What Is :image?

:image (since jQuery 1.0) selects every <input type="image"> — a graphical form submit control that looks like a picture. Official docs state it is equivalent to [type="image"]. It does not match <img> tags. Always prefer $("input:image") over bare $(":image").

$("input:image")              // all image inputs
$("form input:image")         // image inputs inside a form
$("input[type=image]")        // equivalent attribute form
$("img")                      // content pictures — different!

// Avoid on large pages:
$(":image")                   // implies *:image

How to Use :image

Prefix with input, scope to a form, then style, count, or bind click handlers.

1. Write $("input:image") — never bare $(":image") on large pages.
2. Scope to a form: $("#pay input:image").
3. Remember: this is a submit control, not an <img> element.
4. Style or bind events on the matches (official demo uses .css()).
5. For hot paths, prefer input[type="image"] so the browser can optimize.

Pseudocode

matches = []
for each element in search context:
    if element.tag is input
       and element.type is "image":
        matches.add(element)

return matches

// Does NOT match <img> elements

Cheat Sheet

Keep these facts handy while selecting image inputs.

Live Preview

Run different selectors against a small sample form and see how many image inputs match.

Selector

input:imageform input:imageinput[type=image]img (contrast)input:submit (contrast) Run selector

official form attr img submit

Sample markup mirrors the official jQuery form demo (text, checkbox, button, image input) plus an img and submit for contrast.

Result

$("input:image")
matched: 1

/* image input only — img tag ignored */

jQuery Examples

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

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

$("#count").text("For this type jQuery found " + input.length + ".");

For this type jQuery found 1.
Image input highlighted
Text / checkbox / button → unchanged

var a = $("input:image").length;
var b = $("input[type=image]").length;

console.log("input:image →", a);
console.log("[type=image] →", b);
console.log("same set?", a === b);

input:image → 1
[type=image] → 1
same set? true

console.log("image inputs:", $("input:image").length);
console.log("img tags:", $("img").length);

$("input:image").each(function () {
  this.title = "form control";
});
$("img").each(function () {
  this.title = "content picture";
});

image inputs: 1
img tags: 1
Titles show form control vs content picture

$("form").on("submit", function (e) {
  e.preventDefault();
});

$("input:image").on("click", function () {
  $("#out").text("Clicked image input: " + (this.alt || this.name || "unnamed"));
});

Click the image input →
Clicked image input: Go
Other buttons → no handler

var $imgs = $("input[type='image']");
$("#out").text("Found " + $imgs.length + " image input(s) via [type=image]");

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

Found 1 image input(s) via [type=image]
Works in querySelectorAll — no :image extension needed

Performance Notes

Official jQuery docs note that because :image is not CSS, it cannot use the querySelectorAll boost. Prefer [type="image"] when the page is large or you re-query often.

Key Takeaways