Linked sections may show an unwanted outline in Safari due to default focus ring styling applied to anchor links. This typically appears when a user clicks a link that navigates to an internal section via a hash (e.g., #about
), causing Safari to highlight it for accessibility.
1. Understand What’s Triggering the Outline
- Safari applies a default focus ring to elements when they are targeted via hash navigation (e.g., clicking a nav link that scrolls to
#section-id
). - This is an accessibility feature that ensures users see where keyboard or internal link focus is.
- The ring usually appears as a blue or grey outline.
2. Identify the Elements Affected
- Look for links pointing to internal anchors (e.g.,
href="#section-id"
). - The outline usually appears on the target section or element that has the corresponding
id
.
3. Apply Custom Styling to Remove the Outline
To remove the unwanted outline without affecting accessibility:
- Select the section or element that gets the outline in Webflow.
- Go to the Style panel.
- Use the "States" dropdown and choose "Focused".
- Under Focused state, set Outline: None.
Or apply globally using a class:
- Give the target section a custom class (e.g.,
anchor-target
). - Add custom CSS in Page Settings > Custom Code > Inside Head:
- Use:
<style>.anchor-target:focus {outline: none;}</style>
This removes the focus ring only for elements with that class, maintaining focus for other interactive elements.
4. Consider Accessibility Best Practices
- Removing outlines can hinder accessibility for keyboard users.
- A better approach might be to replace the outline with a subtle custom style that’s less intrusive but still visible.
- Example:
<style>.anchor-target:focus {outline: 2px dashed #ccc;}</style>
Summary
Safari’s focus ring appears when using in-page anchor links and can cause outlines around linked sections. To resolve this, target affected elements in Webflow's Focused state and set outline to none, or use a custom class with CSS for more control. Always balance visual cleanup with accessibility.