A aparência e o comportamento dos elementos de entrada são importantes ao criar formulários web. Um formulário com entradas que respondem às ações do usuário contribui muito para melhorar a experiência do usuário e não deve causar confusão ou frustração. O CSS fornece várias pseudo-classes de entrada que podem tornar seus formulários mais intuitivos e fáceis de usar. Vamos analisar essas pseudo-classes em detalhes. A pseudo-classe :focus permite que você selecione um elemento de entrada quando um usuário o seleciona ou clica nele, chamando atenção para o campo de entrada ativo. Isso ajuda os usuários a identificar facilmente onde eles estão digitando no momento:

<link rel="stylesheet" href="styles.css" />
<form>
  <input type="text" />
</form>

input:focus {
  border: 2px solid crimson;
  outline: none;
}

Como o nome indica, a pseudo-classe :hover é acionada quando o usuário posiciona o cursor sobre um elemento. Ele fornece feedback visual antes que o usuário interaja com o input, alertando efetivamente que o input está pronto para ação.

<link rel="stylesheet" href="styles.css" />
<form>
  <input type="text" />
</form>

input:hover {
  background-color: orange;
}

No exemplo acima, o fundo do elemento de entrada muda para uma cor laranja quando o usuário passa o mouse sobre ele, indicando que o campo está pronto para interação. A pseudo-classe :checked permite que você estilize um botão de opção ou caixa de seleção de forma diferente quando um usuário o seleciona. Dessa forma, o usuário pode ver facilmente qual opção ele escolheu. Aqui está um exemplo com uma caixa de seleção para concordar com os termos em um site. NOTA: Parte do CSS neste exemplo usa propriedades que ainda não foram abordadas. Isso é apenas para dar uma ideia de como criar uma checkbox personalizada. Você aprenderá como tudo isso funciona em futuras aulas e workshops.

<link rel="stylesheet" href="styles.css" />
<form>
  <label>
  Agree <input class="checkbox" type="checkbox" />
  </label>
</form>

.checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  vertical-align: middle; 
}

.checkbox:hover {
  border-color: #888;
}

.checkbox:checked {
  background-color: #4caf50;
  border-color: #4caf50;
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox:focus {
  outline: 2px solid #90caf9;
  outline-offset: 2px;
}

:required seleciona elementos de entrada que possuem o atributo required. Ele sinaliza para o usuário que ele deve preencher o campo para enviar o formulário. Aqui está um exemplo com um formulário que possui alguns campos de entrada obrigatórios:

<link rel="stylesheet" href="styles.css" />
<form action="#">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" />

  <button type="submit">Submit</button>
</form>

input:required {
  border: 2px solid orange;
}

Ao validar formulários, você pode usar a pseudo-classe :valid para estilizar os campos de entrada que atendem aos critérios de validação e :invalid para estilizar os campos de entrada que não atendem aos critérios. Normalmente, você usará verde para uma entrada válida e vermelho para uma entrada inválida. Aqui está um exemplo usando a pseudo-classe :valid:

<link rel="stylesheet" href="styles.css" />
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
</form>

input:valid {
  border-color: green;
}

Aqui está um exemplo de uso da pseudo-classe :invalid:

<link rel="stylesheet" href="styles.css" />
<form>  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
</form>

input:invalid {
  border-color: crimson;
}

A pseudo-classe :disabled permite que você selecione e estilize elementos de entrada que estão desabilitados. Estes elementos têm o atributo disabled, que impede os usuários de interagirem com eles. Quando um input está desabilitado, ele não pode ser clicado, focado ou editado. Aqui está um exemplo de um rótulo e um elemento de entrada desabilitado. No CSS, estamos direcionando aquele input desabilitado e dando a ele uma cor de fundo lightgray e alterando o cursor pointer para not-allowed.

<link rel="stylesheet" href="styles.css" />
<form>
  <label for="name">Name:</label>
  <input class="text-input" type="text" id="name" name="name" disabled />
</form>

.text-input:disabled {
  background-color: lightgray;
  cursor: not-allowed;
}

O valor da propriedade CSS cursor: not-allowed; altera a aparência do cursor para indicar que uma ação não é permitida. Quando aplicado a um elemento, ele mostra um cursor com um símbolo de círculo com barra (geralmente um círculo com uma linha diagonal) para sinalizar aos usuários que o elemento não é interativo ou não pode ser clicado ou interagido. Aqui estão alguns outros exemplos de pseudo-classes de input e o que elas fazem:

• :autofill: aplica estilos aos campos de entrada que o navegador preenche automaticamente com dados salvos.
• :optional: estiliza elementos de entrada que não são obrigatórios e podem ser deixados vazios.
• :in-range e :out-of-range: estilizam elementos com base em se seus valores estão dentro ou fora dos limites de intervalo especificados.