Estilizando o estado dos elementos

10.1 Pseudoclasse :focus

As pseudoclasses CSS oferecem ótimas ferramentas para estilizar elementos em diferentes estados. Com elas, você pode melhorar a interação do usuário com formulários e outros elementos interativos na página web. Vamos ver como usar as pseudoclasses :focus, :hover, :disabled e :checked para estilizar elementos de entrada (<input>).

A pseudoclasse :focus é aplicada a um elemento do formulário quando ele recebe foco. Isso normalmente acontece quando clica no elemento ou quando você navega até ele com a tecla Tab. Estilizar elementos focados ajuda os usuários a se orientarem melhor no formulário.

Exemplo de uso:

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

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

Explicação

• border-color: altera a cor da borda do elemento quando ele recebe foco
• box-shadow: adiciona um efeito de sombra ao redor do elemento para destacá-lo
• outline: remove a borda padrão do navegador, substituindo por um estilo personalizado

10.2 Pseudoclasse :hover

A pseudoclasse :hover é aplicada a um elemento quando o usuário passa o cursor sobre ele. Isso pode ser útil para fornecer feedback visual ao interagir com o elemento.

Exemplo de uso:

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

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Explicação

• border-color: altera a cor da borda do elemento quando o cursor está sobre ele
• background-color: altera a cor de fundo do elemento ao passar o cursor sobre ele

10.3 Pseudoclasse :disabled

A pseudoclasse :disabled é aplicada a elementos do formulário que estão desabilitados, ou seja, inativos e não podem ser usados ou modificados pelo usuário. Isso ajuda os usuários a entenderem que o elemento não está disponível para interação.

Exemplo de uso:

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

    
      <form>
        <label for="username">Nome de usuário:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Explicação

• background-color: altera a cor de fundo do elemento desabilitado para mostrar sua inatividade
• color: altera a cor do texto dentro do elemento desabilitado
• cursor: define o cursor para o estado "not-allowed", mostrando visualmente que o elemento está indisponível

10.4 Pseudoclasse :checked

A pseudoclasse :checked é aplicada a elementos do tipo checkbox e radio que estão no estado selecionado. Isso permite estilizar os elementos selecionados, tornando-os mais visíveis.

Exemplo de uso:

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

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Opção 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Opção 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Escolha 1
        </label>
        <label>
          <input type="radio" name="choice">
          Escolha 2
        </label>
      </form>
    
  

Explicação

• background-color: altera a cor de fundo do elemento selecionado
• border-color: altera a cor da borda do elemento selecionado