CSS :focus Selector

Definition and Usage

The :focus pseudo-class matches an element that currently has focus—for example after a click, tap, or Tab key press on an input or button.

It applies only to the focused element itself. To style a parent that contains focus, use :focus-within. For keyboard-oriented rings, prefer :focus-visible when you can.

CSS Syntax

Example: input:focus { background-color: lightblue; }

Selector Forms

How to Use :focus

Target interactive controls, then style a clear focus state users can see.

1. Choose a focusable element (input, button, a[href], …).
2. Write E:focus.
3. Change background, border, or outline—keep contrast high.
4. Test with Tab as well as mouse/touch.

Live Preview

Click or Tab into the field, then switch presets. Styles apply through real :focus rules.

CSS Examples

Each snippet focuses on :focus. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  input:focus {
    background-color: lightblue;
  }
</style>

<label>
  Full Name:
  <input name="firstName" type="text">
</label>

<style>
  select:focus {
    background-color: ivory;
  }
</style>

<label>
  Flavor:
  <select name="flavor">
    <option>Cherry</option>
    <option>Green Tea</option>
    <option>Mint Chip</option>
  </select>
</label>

<style>
  button:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
  }
</style>

<button type="button">Save</button>

Key Takeaways