:inputS2C Home « Selectors « :input

Form input selector.

Shorthand version $(':input')


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

Unfortunately this jQuery form selector acts differently depending upon which browser you are using. In Chrome and IE all input field elements are selected using the following code. In Firefox, Chrome and Safari 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.


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





:input ExampleTop

Selects all button, input, select and textarea elements.

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

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

Pie Survey     




Which pie do you prefer?:

Select a pie shape: 


Press the button below to action the above code: