Selector text

El selector :text selecciona inputs con tipo text. Consulte la etiqueta input. Debido a que :text no pertenece a la especificación CSS, para mejorar el rendimiento en navegadores modernos es mejor usar [type='text'] en su lugar.

Sintaxis

Así seleccionamos inputs con tipo text:

javascript$(':text');

Al igual que con otros selectores de pseudo-clases (que comienzan con ':'), es mejor anteponer el nombre de la etiqueta u otro selector antes de ':', de lo contrario se aplicará el selector '*', es decir, $(':text') se interpretará como $('*:text'), por lo que es mejor usar $('input:text') en su lugar. Debe recordarse que :text también seleccionará todos los inputs que no tengan especificado el atributo type, las diferencias en el comportamiento se pueden ver en el siguiente ejemplo:

javascript$('<input>').is('[type=text]'); // devuelve false
$('<input>').is(':text'); // devuelve true

Ejemplo

Seleccionemos todos los inputs con tipo text y hagamos que tengan fondo verde y borde rojo usando el método css:

html<form>
  <input type="button" value="button">
  <input type="file">
  <input type="checkbox">
  <button>button</button>
  <input type="reset">
  <input type="radio" name="test">
  <input type="radio" name="test">
  <input type="checkbox">
  <input type="text">
</form>

javascript$('form input:text').css({background: 'green', border: '2px red solid'});

$('form').submit(function(event) {
  event.preventDefault(); // previene el envío del formulario
});

Vea también