Vamos ver uns exemplos sobre como aplicar estilos avançados a campos de texto em páginas web. Referimo-nos a campos de texto dos normais <input type=text> e campos de texto que suportam várias linhas <textarea>.

Com estilos, como já foi visto no manual de CSS, podemos definir o formato de apresentação de qualquer elemento da página. Os campos de texto, que sempre têm uma forma muito específica, também aceitam especificações de estilos para variar sua aparência típica.

Vamos ver vários exemplos para comprovar as possibilidades das folhas de estilos, aplicadas sobre campos de texto e textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color: #009900; letter-spacing : 3px;">

Este campo de texto se apresentará com uma borda de 2 pixels, um borda sólida, tamanho da letra de 8 pontos, cor da borda e das letras verde um pouco escuro. Também se define um espaçado entre as letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-color:e3e3e3; border: 1px solid #666666; font-size:8pt; color: #000099">



Este campo de texto tem os estilos declarados com uma sintaxe um pouco distinta, já que se agruparam vários estilos relativos a borda em um só atributo. Os estilos com os que se apresentará são: cor de fundo acinzentado, borda de 1 pixel, borda de estilo sólido, cor da borda cinza mais escuro, tamanho do texto de 8 pontos e cor das letras azul.

<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>



Este campo de texto com várias linhas, também chamado textarea, tem vários estilos, que são parecidos aos que vimos para o anterior campo de texto, com a segurança do atributo overflow, que está definido como auto. O atributo overflow tem relação com as barras de deslocamento que aparecem nos textarea. O valor auto serve para que a barra de deslocamento vertical do campo de texto só apareça em caso de necessidade, ou seja, se o texto do campo supera as linhas que tem reservadas o textarea. Se quisermos que as linhas não sejam vistas nunca, podemos atribuí-la o valor hidden ao atributo overflow. Em relação aos outros estilos deste campo de texto de múltiplas linhas, se definiram 3 valores para o estilo da borde, em um único atributo. Os estilos são borda de um píxel, borda de estilo sólido e borda de cor vermelho pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-color:555555; border-width: 1px;">

Olá a todos que estão lendo isto.
Espero que este exemplo pareça interessante!!
Saudações e sorte!
Juliana
</textarea>

Olá a todos que estão lendo isto. Espero que este exemplo pareça interessante!! Saudações e sorte! Juliana

Neste campo textarea, incluímos também um texto com o qual inicializará seu conteúdo. Primeiro, chamamos a atenção sobre o atributo de HTML readonly, que serve para que o campo textarea não seja editável, ou seja, que não possa mudar seu conteúdo. Também com estilos CSS se definiu uma série de valores para a aparência, estes são: mostrar as barras de deslocamento somente quando for solicitado, uma borda do campo pontilhado, uma cor da borda cinza escuro e uma largura da borda de 1 pixel.

Conclusão

Esperamos que com estas indicações vocês possam aprender um pouco mais sobre como modificar o estilo de um campo de texto, para adaptar melhor ao desenho de suas páginas.

Temos que ter em conta que as características de estilos nem sempre estão disponível em todos os navegadores. As mais importantes sim que poderemos vê-las em todos os navegadores que suportem estilos, apesar de que certos valores, como a borda pontilhada, não podem ser visualizados corretamente em navegadores antigos. Ocorre o mesmo com o atributo readonly, que nem sempre esteve disponível em HTML.