Como Estilizar 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 web é o elemento label. Ele pode ser estilizado usando regras de Folha de Estilo em Cascata.
Para estilizar os elementos label da maneira como aparecem na imagem na introdução, você precisa usar o elemento label com o atributo "for". Além disso, você precisa fechar o elemento label antes de adicionar o elemento "input" em si. O HTML para o formulário completo é mostrado na ilustração.
Para estilizar os elementos label, fiz os labels exibirem como elementos de nível de bloco, que foram flutuados para a esquerda. Então atribui uma largura aos labels para que os campos de input ficassem todos a uma distância uniforme dos labels. Atribui uma cor e tornei o texto em negrito. Usei conteúdo gerado para adicionar dois pontos ( : ) após o label. (Os dois pontos podem não aparecer em todo navegador.)
Aqui está o CSS:
label { color: #B4886B; font-weight: bold; display: block; width: 150px; float: left; } label:after { content: ": " }
Apenas para completude, também mostrarei o CSS usado para estilizar o fieldset, já que os elementos label são delimitados por um fieldset com borda.
Aqui está esse CSS:
fieldset { border: 1px solid #CCA383; width: 400px; background: #FFE8EF; padding: 3px; } fieldset legend { background: #CCA383; padding: 6px; font-weight: bold; }
Você poderia fazer muitas outras coisas para estilizar os elementos label. Meu exemplo é apenas uma maneira de fazer isso.
Tecnologia Eletrônica © [www.351231.com]
