Formulário do CSS

Usando CSS, você pode melhorar significativamente a aparência de formulários HTML:

Experimente você mesmo

definir o estilo do campo de entrada

Uso width a propriedade para determinar a largura do campo de entrada:

Exemplo

input {
  width: 100%;
}

Experimente você mesmo

O exemplo acima se aplica a todos os elementos <input>. Se você quiser definir estilos específicos para tipos de entrada específicos, você pode usar o seletor de atributo:

  • input[type=text] - Seleciona apenas campos de texto
  • input[type=password] - Seleciona apenas campos de senha
  • input[type=number] - Seleciona apenas campos de números
  • etc...

preencher a caixa de entrada

Uso padding a propriedade adiciona espaço dentro do campo de texto.

Dica:Se houver muitos campos de entrada, você pode precisar adicionar margem externa para adicionar mais espaço ao redor deles:

Exemplo

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Experimente você mesmo

Observe que já configuramos box-sizing a propriedade é configurada como border-boxIsso garante que o tamanho total da largura e da altura do elemento inclua a margem interna (preenchimento) e a borda final.

Por favor, em nosso Box Sizing CSS Nesta seção, você aprenderá sobre box-sizing para obter mais informações sobre a propriedade.

caixa de entrada com borda

Use border para alterar a espessura e a cor da borda e usar border-radius para adicionar arredondamento aos cantos:

Exemplo

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Experimente você mesmo

Se precisar apenas da borda inferior, use border-bottom Atributo:

Exemplo

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Experimente você mesmo

caixa de entrada colorida

Use background-color para adicionar uma cor de fundo ao campo de entrada e usar color para alterar a cor do texto:

Exemplo

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Experimente você mesmo

a caixa de entrada com foco

Por padrão, alguns navegadores adicionam uma contorno azul ao redor da caixa de entrada ao ganhar foco (clique). Você pode fazer isso adicionando outline: none; para eliminar este comportamento.

Uso :focus O seletor pode definir um estilo para o campo de entrada quando ele ganha o foco:

Exemplo 1

input[type=text]:focus {
  background-color: lightblue;
}

Clique no campo de texto:

Experimente você mesmo

Exemplo 2

input[type=text]:focus {
  border: 3px solid #555;
}

Clique no campo de texto:

Experimente você mesmo

Caixa de entrada com ícone/imagem

Se você quiser incluir um ícone na caixa de entrada, use background-image propriedade e combiná-la com background-position Juntamente com as propriedades.

Exemplo

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Experimente você mesmo

Caixa de entrada de pesquisa com efeito de animação

Neste exemplo, usamos CSS transition A propriedade define a animação da variação de largura ao focar na caixa de entrada de pesquisa. Mais tarde, você aprenderá sobre Transição CSS Você aprenderá mais sobre transition conhecer as propriedades.

Exemplo

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Experimente você mesmo

Definir o estilo do campo de texto

Dica:Uso resize A propriedade pode evitar que os textareas sejam ajustados no tamanho (desativar o 'puxador' no canto inferior direito):

Exemplo

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Experimente você mesmo

Definir o estilo do menu de seleção

Exemplo

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Experimente você mesmo

Definir o estilo do botão de entrada

Exemplo

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Dica: use width: 100%, para botões de largura total */

Experimente você mesmo

Para saber mais sobre como configurar estilos de botão usando CSS, aprenda em nosso Botão CSS Tutoriais.

Menu responsivo

Ajuste o tamanho da janela do editor TIY para ver os efeitos. Quando a largura da tela for menor que 600 pixels, as duas colunas são empilhadas verticalmente em vez de horizontalmente.

Avançado: os próximos exemplos usam Consultas de mídia Para criar um formulário responsivo. No próximo capítulo, você aprenderá mais sobre esses conhecimentos.

Ver menu responsivo