Focus Indicator

Create clear focus styles that guide users through your interface.

When to use

Apply focus styles to every interactive element such as buttons, links, and form controls so users can navigate confidently.

How to use

Create two contrasting borders by applying box-shadow and removing the browser default outline. This approach ensures your focus style meets contrast requirements independently.

Example

*:focus {
  box-shadow: var(--pl-focus-box-shadow);
}

/* Or modify for your situation */
*:focus {
  box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);
  outline: none;
}

Relevant guidelines

• 1.4.11 Non-text Contrast - Choose high contrast colors for interactive elements.
• 2.4.7 Focus Visible - Display clear focus indicators for keyboard users.
• 2.4.13 Focus Appearance - Design focus indicators that stand out clearly.

Where it's used

• Find

• Digital Collections

• Penn Libraries

• Design System