# Replace Tap Highlight

**MUST** · **ID:** `interactions-tap-highlight-replacement` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-tap-highlight-replacement

> MUST: If you clear `-webkit-tap-highlight-color`, replace it with your own touch feedback (an `:active` state) — never leave a tap with zero visual confirmation.

Disable the default iOS tap highlight but always replace it with an appropriate alternative

The default iOS tap highlight is often too prominent and doesn't match your design. Disabling it is fine, but you must provide an alternative touch feedback — typically a custom :active state — otherwise users get no visual confirmation of their tap.

## Rule snippet

```tsx
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:active { background: var(--muted); }
```

## Bad — do not do this

`interactions-tap-highlight-replacement-bad`

```tsx
export function TapHighlightReplacementBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <style>{`
          .no-tap-bad {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
          }
        `}</style>
        <button className="no-tap-bad w-full px-4 py-2 border border-border rounded-lg text-sm text-foreground">
          Edit Profile
        </button>
        <button className="no-tap-bad w-full px-4 py-2 border border-border rounded-lg text-sm text-foreground">
          Manage Team
        </button>
      </div>
      <p className="text-xs text-error">Tap highlight removed with no replacement — no touch feedback</p>
    </div>
  );
}
```

## Good — do this

`interactions-tap-highlight-replacement-good`

```tsx
export function TapHighlightReplacementGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <style>{`
          .no-tap-good {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
          }
          .no-tap-good:active {
            background: var(--muted);
          }
        `}</style>
        <button className="no-tap-good w-full px-4 py-2 border border-border rounded-lg text-sm text-foreground transition-colors">
          Edit Profile
        </button>
        <button className="no-tap-good w-full px-4 py-2 border border-border rounded-lg text-sm text-foreground transition-colors">
          Manage Team
        </button>
      </div>
      <p className="text-xs text-success">Tap highlight replaced with custom :active state</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)