Member Avatar for veledrom

Hi,

When I click on a textbox, teaxtarea etc. the border turns into a different color (orange, blue) in Chrome, Linux and in some others. How do prevent it with css?

Thanks

  • 3 Contributors
  • 3 Replies
  • 89 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by veledrom

Dani AI

Generated

The colored ring you saw is the browser's default focus indicator coming from the user-agent stylesheet. pointed this out and confirmed disabling the UA focus solved the immediate visual issue, while linked a related discussion. Removing the default indicator hides a useful accessibility cue for keyboard users, so the safer approach is to replace it with a consistent, custom focus style rather than simply suppressing all focus visuals.

Use the :focus-visible pseudo-class to show a clear ring for keyboard focus and avoid visual clutter for mouse clicks. This keeps keyboard navigation intact and looks consistent across browsers. Test with the Tab key (keyboard) and by clicking (mouse) to verify behavior. If older browsers need support, include the WICG polyfill.

/* visible, consistent focus for keyboard users */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* avoid extra glow when focus comes from a mouse click in some UAs */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  box-shadow: none;
}

Read up on the pseudo-class and accessibility guidance before changing focus styles: see MDN on :focus-visible ([MDN]) and WebAIM on outlines ([WebAIM]). For wide compatibility, consider the focus-visible polyfill ([WICG/focus-visible]).

Recommended Answers

All 3 Replies

Member Avatar for sway1101

The only thing I can think of would be to try an set the focus from the input. Try adding the following code to your css file and see if that works.

input:focus{
outline: none;
}
Member Avatar for veledrom

outline: none;

Solved. Thanks

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.