Mais
×

Como estilizar fieldset e legend com CSS

Atualizado em 21 fevereiro, 2017

Um elemento de formulário que te ajudará a organizar e dar um aspecto limpo a um formulário é o fieldset. Um formulário pode conter mais de um fieldset. Por exemplo: pode haver um fieldset com elementos de formulário para informações pessoais de usuário (nome, email e outros detalhes); e outro fieldset pode coletar informações sobre um assunto, produto ou serviço. Dependendo do propósito do formulário, fieldsets podem ajudar a dividi-lo em seções de campos que tenham relação entre si e áreas visualmente distintas. Este artigo te ensinará como estilizar fieldset e legend.

Instruções

Fieldset e legend estilizados
  1. Crie o fieldset mostrado na introdução com o seguinte código HTML:

    Reserve Seu Espaço

  2. Olhe para os vários elementos no formulário. Estes elementos podem ser estilizados:

    , ,

    ,

    não são necessários; pode-se usar ou

    ao invés de

    no exemplo; e na maioria dos formulários o botão de envio não seria parte de um

    , especialmente se o formulário tem mais de um
    , o que é muito provável.

  3. Qualquer regra de CSS pode ser aplicada a um ou a todos os elementos de formulário presentes. Você pode escrever regras para fontes, cores, plano de fundo, imagem de plano de fundo, espaço entre linhas, espaço entre conteúdo e bordas, margem, borda ou qualquer outra coisa que você queira apresentar de forma particular.

  4. Estas são as regras de CSS que eu escrevi para estilizar

    e . Você pode fazer isto de várias outras formas. Meu modo fazer não é a única forma.

    fieldset { border: 1px solid #CCA383; width: 50%; background: #FFE8EF; padding: 3px; } fieldset legend { background: #CCA383; padding: 6px; font-weight: bold; }

  5. Alguns toques simples em CSS usando as propriedades color, padding e border fazem o conteúdo da tag se destacar e concedem ênfase visual ao formulário na página.

O que você precisa

  • Conhecimento básico de HTML
  • Conhecimento básico de CSS
  • Editor HTML
bibliography-icon icon for annotation tool Cite this Article