:input JQ Home  <<  Selectors  <<  :input

Form input selector.

Shorthand version $(':input')

Description

The :input selector, selects all button, input, select and textarea elements.

In Chrome, Edge, Firefox and Opera radio and checkboxes are not highlighted and so the usefulness of this particular selector is questionable. Try the effect in different browsers to see this happen.

Being a jQuery extension the :input pseudo selector is not part of any current CSS specification. Therefore :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the example below to narrow the search and improve performance.

Syntax

Signature Description
jQuery(':input')Form input pseudo-class match

Parameters

None.

Return

N/A.

:input Example Selectors  <<  Top

Selects all button, input, select and textarea elements.

In the example below we apply a red border to 'input' elements within the form.


$(function(){
  $('.ourform').submit(function () { return false; }); // disable submit 
  $('#btn5').on('click', function() {
    $('.ourform :input').css('border', '1px solid red');
  });
});

Pie Survey     

Userame:      

Password:               

     

Which pie do you prefer?:

Select a pie shape: 

            

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors