CSS :enabled Pseudo Classe
Use a pseudo-classe CSS :enabled para selecionar e estilizar elementos habilitados. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe CSS :enabled corresponde a qualquer elemento de formulário que esteja atualmente habilitado — ou seja, que pode ser ativado (clicado, digitado ou focado) e pode receber a entrada do usuário. É a contrapartida direta de :disabled.
Um elemento está "habilitado" quando é do tipo que suporta o estado disabled e não possui o atributo disabled definido. Esta página aborda quando :enabled se aplica, os elementos que ela afeta, pontos de atenção comuns e dois exemplos práticos.
Quais elementos podem ser habilitados
:enabled só tem como alvo elementos que são realmente capazes de ser desabilitados. São os controles de formulário interativos:
<button><input>(todos os tipos)<select><textarea><option><optgroup><fieldset>
Um <div>, <p> ou link nunca pode ser "habilitado" ou "desabilitado" nesse sentido, portanto :enabled jamais os corresponderá — mesmo que sejam interativos.
Por que usar
Por padrão, um controle habilitado já parece ativo, então raramente você precisará de :enabled sozinho. Ele se torna útil quando você quer um contraste visual claro entre controles utilizáveis e inutilizáveis — por exemplo, realçando campos que o usuário pode preencher enquanto :disabled acinzenta os que não pode. Combinar as duas pseudo-classes torna a interatividade de um formulário evidente à primeira vista.
Pontos de atenção
- Estado padrão. Como os controles são habilitados por padrão,
:enabledos corresponde a menos que você adicione explicitamente o atributodisabled. Definirdisabledno HTML ou via JavaScript (element.disabled = true) alterna um elemento de:enabledpara:disabled. <fieldset disabled>em cascata. Desabilitar um<fieldset>desabilita todos os controles dentro dele, fazendo com que esses filhos parem de corresponder a:enabledmesmo sem seu próprio atributodisabled.- Somente leitura não é desabilitado. Um
<input readonly>ainda está habilitado — ele corresponde a:enabled, não a:disabled. Use:read-onlypara estilizar elementos somente leitura.
Versão
Sintaxe
Exemplo de sintaxe CSS :enabled
:enabled {
css declarations;
}Exemplo do seletor :enabled:
Exemplo de código CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<form action="#">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Exemplo do seletor :enabled com a tag <option>:
Outro exemplo de código CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Observe que os navegadores limitam o quanto um <select> e seus elementos <option> podem ser reestilizados, portanto a renderização exata dessas cores varia entre navegadores e sistemas operacionais.
Suporte dos navegadores
A pseudo-classe :enabled é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Pseudo-classes relacionadas
:disabled— o oposto de:enabled; corresponde a controles que não podem ser usados.:read-only— corresponde a controles que o usuário não pode editar (nota: ainda são:enabled).:checked— corresponde a caixas de seleção, botões de opção e opções selecionadas.:required— corresponde a controles de formulário que devem ser preenchidos.:focus— corresponde ao controle que atualmente possui o foco do teclado.