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