CSS para campos textarea de formulário

helldanger1 · Mai 19, 2009

Veremos como aplicar estilos variados a campos de formulário de texto de várias linhas (textarea) com CSS.
Por Miguel Angel Alvarez - Tradução de JML

Com as folhas de estilo CSS pode-se configurar o aspecto de cada elemento de uma página web, de uma maneira muito detalhada. Neste workshop de CSS vamos aplicar estilos aos elementos de formulário Textarea, que são caixas de texto de várias linhas. Veremos vários estilos aplicados sobre textarea, comentando suas distintas propriedades CSS.
O objetivo deste workshop não é explicar o modo de trabalho com CSS, e sim, praticar com determinados atributos sobre os textarea. Pode-se encontrar informação básica para aprender a manejar as folhas de estilo em nosso Manual de CSS. Também dispomos de outros Workshops de CSS, onde se poderá aprender a utilizar esta tecnologia na prática.

helldanger1 · Mai 19, 2009

Um textarea é um elemento de formulário, logo à princípio deveríamos coloca-los entre <form> e </form>. O código HTML mais básico para um textarea é o seguinte:

<textarea class=estilotextarea></textarea>

Já lhe aplicamos uma classe de estilos CSS (estilotextarea), que definiremos na declaração de estilos da página:

.estilotextarea {width:400px;height:100px;border: 2px solid #990000;}

Nesta declaração de estilos indicamos que a largura da caixa de texto seja de 400 pixels e que a altura seja de 100 pixels. Também indicamos uma borda de 2 pixels de tamanho e de cor vermelho escuro.

Agora vejamos outro código HTML para incluir um textarea.

<textarea class=estilotextarea2 cols="60" rows="8"></textarea>

Neste caso, à parte que a classe para definir o estilo do textarea mudou (estilotextarea2), também está sendo indicado umas filas e umas colunas como tamanho do textarea, com os atributos cols e rows. Como os textarea são linhas de texto de várias linhas, com cols indica-se o número de caracteres em horizontal do textarea e com rows o número de filas ou linhas.

Agora o estilo para este textarea seria o seguinte:

.estilotextarea2 {width:300px;height:80px;border: 1px dotted #000099;}

Observamos que com CSS redefinimos a largura e altura, com os atributos width e height. Entretanto, entre a definição com HTML da altura e largura em caracteres do textarea, e a definição com CSS da altura e largura em pixels, manda o que tiver sido definido com CSS. Isto é assim geralmente em todos os casos de estilos que se redefinem com CSS, sempre acabam sendo as folhas de estilo as que predominam no aspecto dos elementos das webs.

Ademais, declaramos uma borda com linha de pontos de 1 pixel de largura no textarea, de cor vermelho escuro.

helldanger1 · Mai 19, 2009

Agora vejamos um terceiro exemplo de textarea. Primeiro seu código HTML:

<textarea class=estilotextarea3 cols="30" rows="8">Texto de prova</textarea>

Este textarea tem a particularidade que aparecerá com um texto escrito dentro. Ou seja, quando se visualizar na página web, ao invés de estar vazio, terá escrito o que colocamos entre <textarea> y </textarea>, "Texto de prova".

A classe que define o estilo deste textarea pode-se ver a seguir:

.estilotextarea3 {font-family: Garamond,verdana;font-size: 18pt;font-weight: bold;letter-spacing: 5px;}

Como se pode ver, foram definidos nesta ocasião vários estilos para as tipografias que serão utilizadas no texto do textarea. Neste caso, foi definida uma fonte garamond, e como padrão, verdana. Um tamanho do texto de 18 pontos, negrito, e um espaçamento entre letras de 5 pixels.

helldanger1 · Mai 19, 2009

Para acabar, veremos um último textarea ao qual vamos colocar o fundo transparente e no qual vamos modificar as cores das barras de deslocamento do textarea.

<textarea class=estilotextarea4 cols="30" rows="5"></textarea>

Para definir o estilo utilizamos o seguinte CSS:

.estilotextarea4 {background-color: transparent;border: 1px solid #000000;scrollbar-arrow-color: #000066;scrollbar-base-color: #000033;scrollbar-dark-shadow-color: #336699;scrollbar-track-color: #666633;scrollbar-face-color: #cc9933;scrollbar-shadow-color: #DDDDDD;scrollbar-highlight-color: #CCCCCC;}

A cor de fundo é transparente, pelo atributo background-color: transparent; isto quer dizer, que a cor do textarea tem a mesma cor que o fundo da página onde está colocado. Se tivermos o textarea colocado sobre um fundo branco, não observaremos nenhuma diferença com respeito a outros textareas, mas se o tivermos sobre um fundo de outra cor, o textarea se verá dessa mesma cor. Logo, foi aplicada uma borda de um pixel negro e com os restantes atributos se modifica a cor das barras de deslocamento do textarea. Atenção, que os estilos para barras de deslocamento só funcionam no Internet Explorer.

Com estes exemplos podemos ver algumas interessantes declarações de estilos para elementos textarea de formulário. Esperemos que sirva para fazer seus próprios formulários com mais estilo.

CSS para campos textarea de formulário

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP