Pseudoclases de entrada: aprende HTML


Hay varias pseudoclases destinadas a diseñar formularios HTML de acuerdo con su configuración.

Comprobado

La pseudoclase CSS: active define los estilos que se utilizarán para un elemento de casilla de verificación en un estado marcado

<style>
input:checked {
    margin-left: 50px;
}
</style>
<form>
    <p><input type="checkbox"> First Option</p>
    <p><input type="checkbox"> Second Option</p>
    <p><input type="checkbox"> Third Option</p>        
</form>

Entradas de formulario habilitadas y deshabilitadas

La pseudoclase CSS: enabled y: disabled define los estilos que se usarán según si un campo de entrada de formulario está habilitado o deshabilitado.

<style>
input:disabled {
    color: gray;    
}

input:enabled {
    font-weight: bold;    
}
</style>
<form>
    <p><input type="text" value="First Option"></p>
    <p><input type="text" value="Second Option"></p>
    <p><input type="text" value="Third Option"></p>        
</form>

Opcional y obligatorio

Solo lectura y lectura-escritura

Válido e inválido

Dentro y fuera de rango

Ejercicio

Esta página aún no tiene un ejercicio. Le invitamos a contribuir con uno enviándome una solicitud de extracción:

https://github.com/ronreiter/interactive-tutorials

Deja un comentario