Estilización de estados de elementos

10.1 Pseudoclase :focus

Las pseudoclases CSS ofrecen herramientas excelentes para estilizar elementos en diferentes estados. Con su ayuda, se puede mejorar la interacción del usuario con formularios y otros elementos interactivos en la página web. Veamos cómo podemos utilizar las pseudoclases :focus, :hover, :disabled y :checked para estilizar elementos de entrada (<input>).

La pseudoclase :focus se aplica a un elemento del formulario cuando recibe el foco. Esto generalmente ocurre al hacer clic en el elemento o al navegar hasta él usando la tecla Tab. La estilización de elementos enfocados ayuda a los usuarios a orientarse mejor en el formulario.

Ejemplo de uso:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Explicación

• border-color: cambia el color del borde del elemento cuando recibe el foco
• box-shadow: añade un efecto de sombra alrededor del elemento para resaltarlo
• outline: elimina el borde estándar del navegador, reemplazándolo con un estilo personalizado

10.2 Pseudoclase :hover

La pseudoclase :hover se aplica a un elemento cuando el usuario pasa el cursor sobre él. Esto puede ser útil para proporcionar retroalimentación visual al interactuar con el elemento.

Ejemplo de uso:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Correo electrónico:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Explicación

• border-color: cambia el color del borde del elemento cuando el cursor está sobre él
• background-color: cambia el color de fondo del elemento al pasar el cursor

10.3 Pseudoclase :disabled

La pseudoclase :disabled se aplica a elementos del formulario que están deshabilitados, es decir, no son activos y no pueden ser usados o modificados por el usuario. Esto ayuda a los usuarios a comprender que el elemento no está disponible para la interacción.

Ejemplo de uso:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Nombre de usuario:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Explicación

• background-color: cambia el color de fondo del elemento deshabilitado para mostrar su inactividad
• color: cambia el color del texto dentro del elemento deshabilitado
• cursor: establece el cursor en estado "not-allowed" para indicar visualmente que el elemento no está disponible

10.4 Pseudoclase :checked

La pseudoclase :checked se aplica a elementos de tipo checkbox y radio que están en estado seleccionado. Esto permite estilizar los elementos seleccionados, haciéndolos más visibles.

Ejemplo de uso:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Opción 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Opción 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Opción 1
        </label>
        <label>
          <input type="radio" name="choice">
          Opción 2
        </label>
      </form>
    
  

Explicación

• background-color: cambia el color de fondo del elemento seleccionado
• border-color: cambia el color del borde del elemento seleccionado

1

Tarea

Frontend SELF ES, nivel 9, lección 4

Bloqueada

Foco del campo

Foco del campo

Abrir

1

Tarea

Frontend SELF ES, nivel 9, lección 4

Bloqueada

Hover del cursor

Hover del cursor

Abrir