quinta-feira, 13 de dezembro de 2007

Formatando Input baseado no seu tipo com CSS

Quando se define um formato para um tipo específico de elemento, todos os seus descendentes irão ficar com a mesma formatação. Isto ocorre, por exemplo, no formato input. Quando se define uma formatação para este elemento, todos os demais que se originam deste (button, checkbox, file, hidden, image, password, radio, reset, submit e text) irão ficar com a mesma formatação, ou seja, se eu defino uma borda de 2 pixels para um input, todos esses demais elementos ficarão com uma borda de 2 pixels.

input { border: 2px; }

Para resolver isto, usa-se seletores de atributos, que individualizam cada elemento do layout, dando características próprias. Sua sintaxe é a seguinte:
input[type="image"] { border: none; }

Neste caso, apenas o input do tipo image não ficará com bordas.

Apesar de ter uma funcionalidade bastante adequada, ela não funciona no IE6!

1 comentários:

Anônimo disse...

Para pegar todos os input hidden usando prototype e a regra CSS postada ai pelo Anderson!

$$("input[type='hidden']").each(function(node){
alert(node.value);
});

[]' Anselmo Battisti