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:
$(':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:
$('<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:
<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>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // previene el envío del formulario
});
