Aprender como estilizar formulários com CSS é uma ótima maneira de melhorar a aparência do seu site. Formulários HTML estão entre as coisas mais feias na maioria das páginas da web. Muitas vezes são enfadonhos e utilitários e não oferecem muito em termos de estilo. Com CSS, isso pode mudar. Combinar CSS com as tags de formulário mais avançadas pode fornecer alguns formulários de boa aparência.
Mudar as cores
Assim como com o texto, você pode alterar as cores do primeiro plano e do plano de fundo dos elementos do formulário. Uma maneira fácil de alterar a cor de fundo de quase todos os elementos do formulário é usar a propriedade background-color na tag de entrada. Por exemplo, este código aplica uma cor de fundo azul (# 9cf) em todos os elementos. entrada {
cor de fundo: # 9cf;
cor: # 000;
}
Para alterar a cor de fundo de apenas alguns elementos do formulário, basta adicionar “textarea” e selecionar o estilo. Por exemplo: input, textarea, select {
cor de fundo: # 9cf;
cor: # 000;
}
Certifique-se de alterar a cor do texto se escurecer a cor do plano de fundo. Cores contrastantes ajudam a tornar os elementos do formulário mais legíveis. Por exemplo, o texto com fundo vermelho escuro é muito mais fácil de ler se a cor do texto for branco. Por exemplo, este código coloca texto branco em um fundo vermelho. input, textarea, select {
cor de fundo: # c00;
cor: #fff;
}
Você pode até colocar uma cor de fundo na própria tag do formulário. Lembre-se de que a tag do formulário é um elemento de bloco, portanto, a cor preenche todo o retângulo, não apenas as localizações dos elementos. Você pode adicionar um fundo amarelo a um elemento de bloco para destacar a área, como este: form {
cor de fundo: #ffc;
}
Adicionar Fronteiras
Assim como acontece com as cores, você pode alterar as bordas de vários elementos do formulário. Você pode adicionar uma única borda ao redor de todo o formulário. Certifique-se de adicionar preenchimento, ou os elementos do formulário ficarão presos ao lado da borda. Aqui está um exemplo de código para uma borda preta de 1 pixel com 5 pixels de preenchimento: form {
borda: 1px sólido # 000;
preenchimento: 5px;
}
Você pode colocar bordas em torno de mais do que apenas o formulário em si. Altere a borda dos itens de entrada para destacá-los: input {
borda: 2px tracejada # c00;
}
Tenha cuidado ao colocar bordas nas caixas de entrada, pois elas se parecem menos com caixas de entrada, e algumas pessoas podem não perceber que podem preencher o formulário.
Combinar recursos de estilo
Ao reunir os elementos do seu formulário com pensamento e algum CSS, você pode configurar um formulário de aparência agradável que complementa o design e o layout completos do seu site.