CSS :optional Pseudo Classe
Use a pseudo-classe CSS :optional para selecionar elementos opcionais. Saiba mais e pratique com exemplos.
A pseudo-classe :optional corresponde a todo controle de formulário que o usuário não é obrigado a preencher. É o oposto exato de :required: um controle corresponde a uma ou à outra, nunca a ambas.
Um controle de formulário é "opcional" simplesmente porque não possui o atributo required. Esta página explica a quais elementos :optional se aplica, como ela difere de pseudo-classes relacionadas, e como usá-la para dar aos usuários uma dica visual sobre quais campos podem ser ignorados com segurança.
A quais elementos :optional corresponde?
Apenas os três controles de formulário que aceitam o atributo required podem corresponder a :optional:
<input>(excetotype="hidden",type="range",type="color", botões e tipos similares que nunca podem ser obrigatórios)<select><textarea>
Qualquer um desses sem o atributo required é correspondido por :optional. Elementos que nunca podem ser obrigatórios — como <div>, <p>, ou um <button> de envio — nunca são correspondidos.
:optional vs :required
Essas duas pseudo-classes particionam todos os controles que podem ser obrigatórios:
| Controle | Correspondido por :required | Correspondido por :optional |
|---|---|---|
<input required> | sim | não |
<input> | não | sim |
<select required> | sim | não |
<textarea> | não | sim |
Como as duas nunca se sobrepõem, um padrão comum é deixar os campos opcionais neutros e destacar apenas os obrigatórios — ou, como no exemplo abaixo, atenuar os campos opcionais para que recuem visualmente.
Sintaxe
:optional {
/* CSS declarations */
}Você pode encadear :optional com outros seletores e pseudo-classes (por exemplo, :hover, :focus) e com pseudo-elementos (por exemplo, ::after) para construir estados mais complexos:
input:optional:focus {
outline: 2px solid #1c87c9;
}Exemplo
O exemplo abaixo estiliza inputs opcionais com uma aparência discreta e semitransparente que fica mais clara ao passar o mouse, enquanto os inputs obrigatórios recebem uma borda inferior em negrito para que a diferença seja óbvia à primeira vista:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Aqui tanto :optional quanto :required são usados juntos para que os dois tipos de campo sejam fáceis de distinguir.
Observações importantes
- Botões de envio não são opcionais. Um
<button>ou<input type="submit">não pode ser obrigatório, portanto nunca corresponde a:optional. Estilize botões com seu próprio seletor. - Estados de validação são separados.
:optionalapenas informa se um campo é obrigatório — não se o seu valor é válido. Para isso, use:valide:invalid. - Atualiza em tempo real. Se você alternar o atributo
requiredcom JavaScript, o navegador reavalia:optional/:requiredimediatamente, de modo que a estilização acompanha a mudança.
Pseudo-classes relacionadas
:required— o inverso de:optional.:valide:invalid— correspondem a controles conforme seu valor passa na validação.:enablede:disabled— correspondem por interatividade.:read-only— corresponde a controles que o usuário não pode editar.