English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Pseudo-classe :habilitado do CSS representa qualquer elemento habilitado. Se um elemento puder ser ativado (como selecionar, clicar ou aceitar entrada de texto) ou obter o foco, ele está habilitado. O elemento também tem um estado desabilitado, quando desabilitado, o elemento não pode ser ativado ou obter o foco.
Manual completo de seletores CSS
Definir a cor do texto de todos os campos do tipo "texto" habilitados:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
input:habilitado {
cor: #22AA22;
}
input:desabilitado {
cor: #D9D9D9;
}
</style>
</head>
<body>
<form ao_action="url_do_formulario">
<etiqueta para="PrimeiroCampo"> Primeiro campo (habilitado):</etiqueta> <input tipo="texto" id="PrimeiroCampo" valor="Lorem"><br />
<etiqueta para="SegundoCampo"> Segundo campo (desabilitado):</etiqueta> <input tipo="texto" id="SegundoCampo" valor="Ipsum" desabilitado="desabilitado"><br />
<input tipo="enviar" valor="Enviar" />
</form>
</body>
</html>Teste e veja ‹/›Seletor :enabled coincide com cada elemento ativado (usado principalmente para elementos de formulário).
Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.
| Seletor | |||||
|---|---|---|---|---|---|
| :enabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Definir a cor de fundo para todos os elementos de entrada ativos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
input:enabled
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Nome: <input type="text" value="Mickey" /><br>
Sobrenome: <input type="text" value="Mouse" /><br>
País: <input type="text" disabled="disabled" value="Disneyland" /><br>
Senha: <input type="password" name="password" />
> <input type="radio" value="masculino" name="gender" /> Masculino<br>
> <input type="radio" value="feminino" name="gender" /> Feminino<br>
> <input type="checkbox" value="Bicicleta" /> Eu tenho uma bicicleta<br>
> <input type="checkbox" value="Carro" /> Eu tenho um carro
</form>
</body>
</html>Teste e veja ‹/›