Um formulário com etiquetas estilizadas
Como definir o estilo de um rótulo de formulário com CSS. Um elemento de formulário usado para rotular os vários campos e áreas de entrada em um formulário de página da web é o elemento de rótulo. Ele pode ser estilizado usando as regras da Folha de Estilo em Cascata.
Passo 1
Para definir o estilo dos elementos do rótulo da maneira como aparecem na imagem na introdução, você precisa usar o elemento do rótulo com o atributo "for". Além disso, você precisa fechar o elemento label antes de adicionar o próprio elemento "input". O HTML para o formulário completo é mostrado na ilustração.
Vídeo do dia
Passo 2
Para definir o estilo dos elementos do rótulo, fiz os rótulos serem exibidos como elementos de nível de bloco, que foram flutuados para a esquerda. Em seguida, atribuí uma largura aos rótulos para que todos os campos de entrada fiquem a uma distância uniforme dos rótulos. Atribuí uma cor e deixei o texto em negrito. Usei o conteúdo gerado para adicionar dois pontos (:) após o rótulo. (Os dois pontos podem não aparecer em todos os navegadores.)
Aqui está o CSS:
etiqueta {cor: # B4886B; intensidade da fonte: Negrito; display: bloco; largura: 150px; flutuar: esquerda; } rótulo: após {conteúdo: ":"}
etapa 3
Apenas para completar, também mostrarei o CSS usado para estilizar o fieldset, uma vez que os elementos do rótulo são incluídos em um fieldset com borda.
Aqui está esse CSS:
fieldset {border: 1px solid # CCA383; largura: 400px; plano de fundo: # FFE8EF; preenchimento: 3px; } legenda do fieldset {background: # CCA383; preenchimento: 6px; intensidade da fonte: Negrito; }
Passo 4
Você pode fazer muitas outras coisas para definir o estilo dos elementos do rótulo. Meu exemplo é apenas uma maneira de fazer isso.
O formulário HTML
Coisas que você precisa
Conhecimento prático de HTML
Conhecimento prático de CSS
