CodeGym/Cursos/Frontend SELF ES/Pseudoclases de formulario

Pseudoclases de formulario

Disponible

4.1 Pseudoclase :checked

Las pseudoclases de formulario en CSS proporcionan oportunidades para estilizar elementos de formulario dependiendo de su estado. Estas pseudoclases permiten crear formularios interactivos y accesibles, mejorando la interfaz de usuario y la experiencia. Veamos más en detalle las pseudoclases :checked, :disabled, :enabled y :invalid.

La pseudoclase :checked se aplica a los elementos de formulario que están en estado "seleccionado". Esto se refiere a los checkboxes (<input type="checkbox">), radiobuttons (<input type="radio">) y opciones (<option>).

Sintaxis:

selector:checked {
  propiedades: valores;
}

Ejemplo de uso

En este ejemplo, los checkboxes, radiobuttons y opciones seleccionados obtienen el color de fondo correspondiente cuando están en estado "seleccionado":

CSS
/* Estilización de checkbox seleccionado */

input[type="checkbox"]:checked {
  background-color: #3498db;
}

/* Estilización de radiobutton seleccionado */

input[type="radio"]:checked {
  background-color: #2ecc71;
}

/* Estilización de opción seleccionada */

option:checked {
  background-color: #e74c3c;
}

4.2 Pseudoclase :disabled

La pseudoclase :disabled se aplica a los elementos de formulario que están en estado deshabilitado. Es útil para estilizar elementos que están temporalmente no disponibles para interacción.

Sintaxis:

selector:disabled {
  propiedades: valores;
}

Ejemplo de uso

En este ejemplo, los campos de entrada y botones deshabilitados obtienen el color de fondo, bordes y texto correspondiente, y también cambian el cursor a "prohibido":

CSS
/* Estilización de campo de entrada deshabilitado */

input:disabled {
  background-color: #f0f0f0;
  border-color: #ccc;
  color: #888;
}

/* Estilización de botón deshabilitado */

button:disabled {
  background-color: #d0d0d0;
  color: #777;
  cursor: not-allowed;
}

4.3 Pseudoclase :enabled

La pseudoclase :enabled se aplica a los elementos de formulario que están en estado habilitado. Esto permite estilizar elementos disponibles para interacción.

Sintaxis:

selector:enabled {
  propiedades: valores;
}

Ejemplo de uso

En este ejemplo, los campos de entrada y botones habilitados obtienen el color de fondo, bordes y texto correspondiente, y también cambian el cursor a "puntero":

CSS
/* Estilización de campo de entrada habilitado */

input:enabled {
  background-color: #fff;
  border-color: #3498db;
}

/* Estilización de botón habilitado */

button:enabled {
  background-color: #2ecc71;
  color: white;
  cursor: pointer;
}

4.4 Pseudoclase :invalid

La pseudoclase :invalid se aplica a los elementos de formulario que no han pasado la validación. Esto permite estilizar los campos de entrada que contienen datos incorrectos.

Sintaxis:

selector:invalid {
  propiedades: valores;
}

Ejemplo de uso

En este ejemplo, los campos de entrada y áreas de texto incorrectos obtienen el color de borde y fondo correspondiente para mostrar visualmente que los datos no pasaron la validación:

CSS
/* Estilización de campo de entrada incorrecto */

input:invalid {
  border-color: #e74c3c;
  background-color: #f9e0e0;
}

/* Estilización de área de texto incorrecta */

textarea:invalid {
  border-color: #e74c3c;
  background-color: #f9e0e0;
}

4.5 Ejemplo de implementación completa

CSS
/* Estilización de checkbox seleccionado */

input[type="checkbox"]:checked {
  background-color: #3498db;
}

/* Estilización de radiobutton seleccionado */

input[type="radio"]:checked {
  background-color: #2ecc71;
}

/* Estilización de campo de entrada deshabilitado */

input:disabled {
  background-color: #f0f0f0;
  border-color: #ccc;
  color: #888;
}

/* Estilización de botón deshabilitado */

button:disabled {
  background-color: #d0d0d0;
  color: #777;
  cursor: not-allowed;
}

/* Estilización de campo de entrada habilitado */

input:enabled {
  background-color: #fff;
  border-color: #3498db;
}

/* Estilización de botón habilitado */

button:enabled {
  background-color: #2ecc71;
  color: white;
  cursor: pointer;
}

/* Estilización de campo de entrada incorrecto */

input:invalid {
  border-color: #e74c3c;
  background-color: #f9e0e0;
}

/* Estilización de área de texto incorrecta */

textarea:invalid {
  border-color: #e74c3c;
  background-color: #f9e0e0;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de pseudoclases de formulario</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <form>
      <label>
        <input type="checkbox" name="option1"> Option 1
      </label>
      <br>
      <label>
        <input type="radio" name="choice" value="1"> Choice 1
      </label>
      <label>
        <input type="radio" name="choice" value="2"> Choice 2
      </label>
      <br>
      <input type="text" placeholder="Enter your name" required>
      <br>
      <input type="email" placeholder="Enter your email" required>
      <br>
      <button type="submit">Submit</button>
      <button type="button" disabled>Disabled Button</button>
    </form>
  </body>
</html>
1
Tarea
Frontend SELF ES,  nivel 29lección 3
Bloqueada
Elementos desactivados
Elementos desactivados
1
Tarea
Frontend SELF ES,  nivel 29lección 3
Bloqueada
Campos incorrectos
Campos incorrectos
Comentarios
  • Populares
  • Nuevas
  • Antiguas
Debes iniciar sesión para dejar un comentario
Esta página aún no tiene comentarios