Focus Effects

Part of the CSS Mastery section of Coddy's HTML journey — lesson 9 of 43.

The :focus pseudo-class lets you style an element when it gets focus—like when you click on it or tab through it using the keyboard. It's a great way to highlight the element you're interacting with! For example:

<input type="text">

Style the input when it gets focus:

input {
  border: 2px solid #ccc;
}

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

When the user clicks on or tabs to this input field, the border will change color to blue and a subtle blue shadow will appear around it.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a CSS rule that applies special styling to a text input when it receives focus.

When focused, changes the border to orange rgb(255, 152, 0)
When focused, adds a yellow background color rgb(255, 243, 224)

Cheat sheet

The :focus pseudo-class styles an element when it receives focus (clicked or tabbed to):

input {
  border: 2px solid #ccc;
}

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

This changes the border color and adds a shadow when the input is focused.

Try it yourself

<!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>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.