1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão CSS para campos textarea de formulário

    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  4. #4
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar