jQuery :image Selector

What You’ll Learn

The :image selector matches every input[type="image"] element — graphical submit buttons in forms. jQuery extension since 1.0; equivalent to [type="image"]; does not match <img> tags.

Introduction

HTML forms can use graphical submit buttons — <input type="image" src="…" alt="Submit"> — instead of plain text buttons. When you need to style every image submit control or attach click handlers, jQuery’s :image pseudo-class gathers them in one expression.

jQuery has supported :image since version 1.0. Official documentation describes it as selecting all elements of type image and states it is equivalent to [type="image"]. Because it is a jQuery extension, prefer input[type="image"] when you need native querySelectorAll speed in modern browsers.

Understanding the :image Selector

:image filters by the input’s type attribute:

• <input type="image" src="go.png"> + input:image → matches.
• <input type="submit"> + input:image → no match.
• <img src="photo.jpg"> + input:image → no match (use $("img")).
• <button type="submit"> + input:image → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":image" )

// recommended — prefix with input:
$( "input:image" )

// scoped to a form:
$( "#searchForm input:image" )

// CSS-equivalent (native querySelectorAll):
$( "input[type='image']" )

Parameters

• None — :image takes no arguments. It always means type="image" on an input element.

Return value

• A jQuery object containing every matched image input in document order within the search scope.
• Empty collection when no image inputs exist.

Official jQuery API example

var input = $( "input:image" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" ).text( "For this type jQuery found " + input.length + "." );

Examples Gallery

Example 1 follows the official jQuery input:image demo. Examples 2–5 cover attribute equivalence, the img vs input distinction, scoped form queries, and click coordinates.

var input = $( "input:image" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" ).text( "For this type jQuery found " + input.length + "." );

Image input(s) → yellow background, red border
Div text → "For this type jQuery found 1." (one image input in demo form)

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

:image → 1
[type=image] → 1 (same count)

console.log( "input:image →", $( "input:image" ).length );
console.log( "img tag →", $( "img" ).length );

input:image → 1 (form submit graphic)
img tag → 1 (content photo) — different elements

$( "#cartForm input:image" ).css( "outline", "3px solid #2563eb" );

#cartForm image input → blue outline
#searchForm image input → unchanged

$( "input:image" ).on( "click", function ( e ) {
  console.log( "Clicked at", e.pageX, e.pageY );
});

Click image submit → logs pageX/pageY coordinates
Form also submits name.x and name.y values server-side

🚀 Common Use Cases

• Form styling — highlight all input:image controls as in the official demo.
• Multi-form pages — scope with $("#formId input:image").
• Accessibility — verify every image input has an alt attribute.
• Legacy UIs — image-map submit buttons with coordinate data.
• Validation — count image submits before enabling a wizard step.
• Performance — prefer input[type="image"] for native selectors.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not bare CSS pseudo-class.
• Equivalent to [type="image"] — official jQuery documentation.
• Matches input[type="image"] only — not <img> elements.
• Prefer input:image over bare $(":image") (implies *:image).
• Image inputs submit forms like submit buttons, plus optional x/y coordinates.
• Always provide meaningful alt text for accessibility.

💡 Best Practices