English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El pseudo-clase :enabled en CSS representa cualquier elemento activado (habilitado). Si un elemento puede ser activado (como seleccionar, hacer clic o aceptar entrada de texto), o puede obtener el foco, ese elemento está activado. El elemento también tiene un estado deshabilitado, cuando está deshabilitado, el elemento no puede ser activado ni obtener el foco.
Manual de referencia de selectores CSS completos
Establecer el color del texto de todos los campos de texto tipo="text" habilitados:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
</style>
</head>
<body>
<formulario accion="url_del_formulario">
<etiqueta for="FirstField">Primer campo (habilitado):</etiqueta> <input tipo="text" id="FirstField" value="Lorem"><br />
<etiqueta for="SecondField">Segundo campo (deshabilitado):</etiqueta> <input tipo="text" id="SecondField" value="Ipsum" deshabilitado="deshabilitado"><br />
<input tipo="submit" value="Enviar" />
</form>
</body>
</html>Prueba y mira ‹/›:enabled Selector coincide con cada elemento activo (principalmente para elementos de formulario).
Los números en la tabla representan la primera versión del navegador que admite la propiedad.
| Selector | |||||
|---|---|---|---|---|---|
| :enabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Establecer el color de fondo para todos los elementos de entrada activos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
input:enabled
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Nombre: <input type="text" value="Mickey" /><br>
Apellido: <input type="text" value="Mouse" /><br>
País: <input type="text" disabled="disabled" value="Disneyland" /><br>
Contraseña: <input type="password" name="password" />
<input type="radio" value="male" name="gender" /> Masculino<br>
<input type="radio" value="female" name="gender" /> Femenino<br>
<input type="checkbox" value="Bike" /> Tengo una bici<br>
<input type="checkbox" value="Car" /> Tengo un coche
</form>
</body>
</html>Prueba y mira ‹/›