Pseudo-classe :disabled
A pseudo-classe :disabled é utilizada para selecionar e estilizar elementos que estão desativados ou desabilitados. Essa pseudo-classe é comumente aplicada a campos de formulário, botões ou outros elementos interativos quando eles estão em um estado inativo e não podem receber entrada do usuário.
Exemplo
Considere o seguinte trecho de código HTML com um botão desativado:
<button type="button" disabled>Desabilitado</button>
<button type="button">Habilitado</button>O código CSS abaixo aplicará estilos específicos apenas ao botão desativado:
button:disabled {
background-color: #cccccc; /* Cinza */
color: #666666; /* Cinza escuro */
cursor: not-allowed; /* Cursor com símbolo de bloqueado */
}
Neste exemplo, o primeiro botão, que está desativado, terá um fundo cinza, texto em cinza escuro e ao passar o cursor do mouse em cima desse elemento, o simbolo do cursor será o de bloqueado.