Member Avatar for Member #931611

I notice that in some browsers, on some OSs, a field in a form gets a colored border. Is there any way to use CSS3, or possibly a JavaScript, to change the border color (as one can change the text highlight color on a given HTML page using CSS3)?

  • 3 Contributors
  • 2 Replies
  • 253 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

That colored border is the browser’s focus indicator (the “focus ring”). It’s fine to style it, but don’t simply remove it — keyboard users rely on it. ’s suggestion removes the default ring, and ’s clarification about whether you meant border vs. text color is useful: you can change the border, the outline, or add a custom glow. The modern, accessible approach is to provide a clear, visible custom focus style (use :focus-visible where supported) and fall back for older browsers.

/* accessible custom focus (modern browsers) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #1e90ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(30,144,255,0.16);
  transition: box-shadow .12s ease, outline-color .12s ease;
}

/* fallback for browsers without :focus-visible */
input:focus,
textarea:focus,
select:focus {
  border-color: #1e90ff;
  box-shadow: 0 0 0 3px rgba(30,144,255,0.12);
}

If you need JS (for complex widgets or to animate focus state), toggle a class on focus/blur and style that class instead:

document.addEventListener('focusin', function(e){
  if (e.target.matches('input,textarea,select')) e.target.classList.add('is-focused');
});
document.addEventListener('focusout', function(e){
  if (e.target.matches('input,textarea,select')) e.target.classList.remove('is-focused');
});

Notes and troubleshooting:

  • Some engines add native chrome; to get a consistent look you may also reset appearance (-webkit-appearance/appearance) but be careful — that can remove other useful native affordances.
  • Use outline-offset/box-shadow to avoid changing layout when the ring appears.
  • Never leave keyboard users without a visible focus indicator; prefer :focus-visible so mouse users don’t always see the ring but keyboard users do.
  • ::selection only affects text selection, not the focus ring, so it won’t change this behavior.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

I think you are referring to a border around text boxes while using certain browsers? If so, apply this CSS:

input:focus {outline:none;}

Member Avatar for dany12

ok you want the border to change and the input to have a diffrent color or the text to have a diffrent color?

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.