Member Avatar for buddyb

I realize this is standard HTML stuff from the browsers when you HREF a link. Well, I'm using img buttons for the link, and the blue outline, or purplish when clicked looks pretty awful. How may I preclude this showing up when the pages download?
Thanks,
BuddyB

  • 2 Contributors
  • 2 Replies
  • 121 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by buddyb

Dani AI

Generated

The blue / purple “box” is the browser’s focus/active indicator for linked content. pointed to the quick fix and confirmed it works. That solves the visual problem, but two follow-ups matter: keyboard accessibility (don’t silently remove the focus cue) and cleaner, modern ways to style image-like buttons.

Prefer replacing the default outline with a clear, custom focus state instead of hiding it. Use the newer :focus-visible so mouse clicks don’t trigger the keyboard focus style, and create a subtle ring with box-shadow so keyboard users still see where focus is. Example:

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.6);
  border-radius: 4px;
}

As an alternative pattern, make the control a semantic element you can style (a <button> or an <a> with a CSS background) and provide an accessible label (aria-label or visually hidden text). This gives full control over hover/active/focus visuals while keeping keyboard and screen-reader support:

<button class="icon" aria-label="Save">
</button>

button.icon {
  width:48px; height:48px;
  background: url(icon.png) center/contain no-repeat;
  padding:0; cursor:pointer;
}
button.icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,123,255,0.6);
}

Quick checklist before shipping: test keyboard-only (Tab) to confirm visible focus, verify contrast of the focus ring (WCAG non-text contrast guidance), test across browsers (some need :focus-visible polyfill), and ensure images used as controls have meaningful alt or ARIA labels. If an image is purely decorative and not interactive, don’t make it a focusable link at all.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

Use the "border=0" property.

Member Avatar for buddyb

Thanks for that. I was just coming back to explain what a dufus I am. I haven't fiddled with this for awhile and had forgotten I had to do this in order not to have one. Onward and upward :).
Thanks again, BuddyB

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.