Seletor text
O seletor :text seleciona inputs com
o tipo text. Consulte a tag
input.
Como :text não faz parte da especificação CSS,
para melhorar o desempenho em navegadores modernos
é preferível usar [type='text'] em seu lugar.
Sintaxe
É assim que selecionamos inputs do tipo text:
$(':text');
Assim como com outros pseudo-seletores de classe
(que começam com ':'), é melhor colocar um nome de tag
ou outro seletor antes do ':',
caso contrário, o seletor '*' será aplicado,
ou seja, $(':text') será interpretado como
$('*:text'), portanto, em vez disso, é melhor
usar $('input:text').
É importante lembrar que :text também selecionará
todos os inputs onde o atributo type não está especificado.
As diferenças de comportamento podem ser vistas no
seguinte exemplo:
$('<input>').is('[type=text]'); // retorna false
$('<input>').is(':text'); // retorna true
Exemplo
Vamos selecionar todos os inputs do tipo text e
definir um fundo verde e uma borda vermelha para eles usando o 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(); // impede o envio do formulário
});
