Efeitos de Foco

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 9 de 43.

A pseudo-classe :focus permite que você estilize um elemento quando ele recebe foco — como quando você clica nele ou navega por ele usando o teclado. É uma ótima maneira de destacar o elemento com o qual você está interagindo! Por exemplo:

<input type="text">

Estilize o input quando ele receber foco:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Quando o usuário clica ou navega com a tecla tab para este campo de entrada, a borda mudará de cor para azul e uma sombra azul sutil aparecerá ao redor dele.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma regra CSS que aplique uma estilização especial a um campo de entrada de texto quando ele receber foco.

Quando focado, altera a borda para laranja rgb(255, 152, 0)
Quando focado, adiciona uma cor de fundo amarela rgb(255, 243, 224)

Folha de consulta

A pseudo-classe :focus estiliza um elemento quando ele recebe foco (clicado ou acessado via tab):

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Isso altera a cor da borda e adiciona uma sombra quando o input recebe foco.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.