Teste de estilização de formulários

 

               

radio button  check box      

Este é o formulário renderizado no seu navegador. Olhe o código fonte da página para ver as estilizações.
A cor de textos marrom foi definida para o corpo da página ('body') e afetam
os 'captions' dos radio e checkbox buttons bem como todo o restante da página.

As ' screenshots' a mostradas a seguir ilustram como os diferentes navegadores renderizam o formulário.
A linha pontilhada está em volta da div #typein que estiliza as áreas de input sem afetar os botões Submit e Clear.
O Select (popup) não é afetado mesmo estando dentro da div #typein por não ser um 'Input'.

Explorer 6.x (WinXP)

IE 6 form styles

IE6 (WinXP) renderiza todos os elementos do formulário segundo as definições de estilo adotadas.
Os input e text areas seguem as cores da estilização definida, mas note como o texto dentro do input desceu.
O padding de 3px especificado na estilização foi respeitado somente em cima.

Explorer 5.x (Mac)

IE 5 form styles

IE5 (Mac) também mostra o fundo e as bordas corretamente, assim como o padding.
Os botões Submit e Clear estão diferentes.

 Mozilla 1.7

mozilla form styles

Mozilla 1.7 (Mac) mantém as coisas mais certas.
O alinhamento dos rótulos dos botões radio e check box está deslocado.
Observe que o Mozilla só apresenta barras de rolagem quando necessário. Elas não estão presentes aqui.

Safari 1.2 (Mac)

safari form styles

Safari não trata bem as estilizações para formulários. Somente as definições de estilo para fontes funcionaram.

Opera 7.x (Mac)

 opera form styles

Tal como Safari, Opera 7.5 (Mac)ignora a maioria das definições de estilo para foemulários - e apara a parte inferior dos botões.