Aprender a estilizar formulários com CSS é uma ótima maneira de melhorar a aparência do seu site. Os formulários HTML estão entre as coisas mais feias da maioria das páginas da web. Eles são muitas vezes chatos 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 bonitos.
Mude as cores
Assim como com o texto, você pode alterar as cores de primeiro e segundo plano dos elementos de formulário. Uma maneira fácil de alterar a cor do plano de fundo de quase todos os elementos do formulário é usar a propriedade background-color na tag de entrada. Por exemplo, esse código aplica uma cor de plano de fundo azul (nº 9cf) em todos os elementos.
entrada { background-color: # 9cf; cor: # 000;}
Para alterar a cor de fundo de apenas alguns elementos do formulário, apenas adicione textarea e selecione o estilo. Por exemplo:
input, textarea, select { background-color: # 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 em uma cor de fundo vermelho escuro é muito mais fácil de ler se a cor do texto for branca. Por exemplo, esse código coloca texto branco em um plano de fundo vermelho.
input, textarea, select { cor de fundo: # c00; cor: #fff;}
Você pode até colocar uma cor de fundo na própria tag de formulário. Lembre-se de que a tag de formulário é um elemento de bloco, portanto, a cor preenche todo o retângulo, não apenas os locais dos elementos. Você pode adicionar um fundo amarelo a um elemento de bloco para destacar a área, desta forma:
Formato { background-color: #ffc;}
Adicionar bordas
Tal como acontece com as cores, você pode alterar as bordas de vários elementos de formulário. Você pode adicionar uma única borda ao redor do formulário inteiro. Certifique-se de adicionar preenchimento ou os elementos do formulário ficarão presos ao lado da borda. Veja um exemplo de código para uma borda preta de 1 pixel com 5 pixels de preenchimento:
Formato { borda: 1px sólido # 000; preenchimento: 5px;}
Você pode colocar bordas em torno de mais do que apenas o próprio formulário. Altere a borda dos itens de entrada para destacá-los:
entrada { borda: 2px tracejada # c00;}
Tenha cuidado ao colocar bordas em caixas de entrada, pois elas parecem menos caixas de entrada e algumas pessoas podem não perceber que podem preencher o formulário.
Combine os recursos de estilo
Ao reunir seus elementos de formulário com o pensamento e algumas CSS, você pode configurar um formulário bonito que complementa o design e o layout do site.
