You are currently viewing 7 Pseudo-classes de formulário CSS

7 Pseudo-classes de formulário CSS

  • Post author:
  • Post category:CSS

Introdução

As pseudo-classes são utilizadas para definir o estado especial de um elemento.

Por exemplo, em um formulário, quando um determinado campo está selecionado, é possível indicar de uma forma visual, colocando um foco nesse elemento.

E para dar esse foco é possível alterar o estilo, para deixar esse campo diferente dos demais.

E para estilizar somente o campo onde o usuário está com o cursor, é utilizado a pseudo-classe :focus.

E nesse post vamos ver essa e outras pseudo-classes.

Disabled

É utilizado para colocar um estilo especial para um campo que esteja desabilitado, ou seja, o usuário não pode preencher dados.

Por vezes os formulários podem ter um campo no qual uma informação pode ser um resultado de um cálculo por exemplo, e por isso o campo aparece na tela, porém não pode ser atualizado.

O campo desabilitado tem a propriedade disabled definida no HTML.

E para aplicar o estilo de campo desabilitado é possível fazer com :disabled no CSS, dessa forma:

<label> Campo desabilitado </label><br />
<input class="campo-desabilitado" disabled />
.campo-desabilitado:disabled {
  background-color: #ccc;
}

Resultado:

Focus

Como citei no exemplo, é utilizado para estilizar um elemento que está com o foco do cursor.

Esse recurso é muito útil principalmente em formulários com vários campos, esse recurso pode ajudar a encontrar qual campo está selecionado.

E para adicionar o estilo, basta passar o seletor com o :focus na frente, dessa forma:

<label> Campo com foco </label><br />
<input class="campo-com-foco" />
.campo-com-foco:focus {
  background-color: lightcyan;
}

Resultado:

O estilo só será aplicado quando o cursor estiver nesse campo, quando não estiver, o campo fica com o estilo normal.

Checked

Este é utilizado para definir um estilo para quando um checkbox está selecionado.

Também pode ser utilizado na tag <option> do elemento <select>, para estilizar a opção selecionada.

Nesse caso acredito que não tenham muitas personalizações, mas uma possível é colocar uma borda em volta da opção selecionada:

<label> Checkbox </label><br />
<input type="checkbox" checked class="checkbox" />
.checkbox:checked {
  box-shadow: 0 0 0 3px red;
}

Resultado:

Required

Esta deve ser a propriedade mais utilizada, porque indica facilmente se um campo é requerido direto no HTML.

Isso é muito útil para garantir que o usuário envie as informações necessárias em um formulário.

Então pode ser legal criar um estilo para informar que o campo precisa ter alguma informação.

<label> Campo requerido </label><br />
<input class="campo-requerido" required />
.campo-requerido:required {
  border: 2px dotted red;
}

Resultado:

Este estilo coloquei somente como exemplo.

Nesse caso, normalmente o estilo é aplicado após o usuário submeter o formulário, ai sim indicaria que tem um campo obrigatório sem preenchimento.

Isso para não encher o usuário com muitas informações de estilo logo de cara.

Valid

Este é utilizado para quando o campo tem um valor válido, o valor que o usuário preencheu está correto.

Pode ser útil dentro do formulário indicar que este campo está correto, para o usuário ter um feedback rápido sobre o campo preenchido.

<label> Campo válido </label><br />
<input class="campo-valido" />
.campo-valido:valid {
  border: 2px solid green;
}

Resultado:

Invalid

O contrário do campo válido, é o campo inválido, esse talvez seja uma das pseudo-classes importantes, para indicar de alguma forma para o usuário que precisa de alguma correção.

E essa pseudo-classes serve exatamente para estilizar um campo com preenchimento incorreto.

Por exemplo um campo de e-mail, que não tem um e-mail válido preenchido:

<label> Campo inválido </label><br />
<input class="campo-invalido" type="email" />
.campo-invalido:invalid {
  border: 2px solid red;
}

Resultado:

In-range

Muito parecido com o valid, porém utilizado em campos do tipo número, onde o usuário tem um range de opções para escolher.

É possível estilizar caso o usuário tenha escolhido um valor correto dentro do range de opções:

<label> Campo número </label><br />
<input
  class="numero"
  type="number"
  min="1"
  max="5"
  value="3"
/>
.numero:in-range {
  border: 2px solid green;
}

Resultado:

Código fonte

O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.

Para ver outros canais onde o posto conteúdo sobre CSS veja os Links do Programando Soluções.

Conclusão

Essas são algumas das pseudo-classes que podem ser utilizadas em formulários.

É interessante conhecer essas pseudo-classes e colocar em prática, porque elas podem ser muito úteis para o layout e ajudar muito o usuário do seu site ou sistema.

Recomendo que busque mais informações sobre esse assunto, pois pode ajudar muito no dia a dia.

Referências

https://daily-dev-tips.com/posts/css-pseudo-classes-forms/

https://www.w3schools.com/css/css_pseudo_classes.asp

Este conteúdo te ajudou de alguma forma?