Member Avatar for sid7

Hello,

I'm facing an annoying problem where a button's border colour changes when I click on the text fields in the same form.

I could use onfocus="blur();" on the text fields to resolve this, but then they will lose focus when selected.

So, I'm trying to find out where I can define this colour that the border changes to when text fields are selected. (i.e use camouflage so change of colour is not noticed)

// my css

input
{
padding: 4px; 
color:#888888; 
border: 1px solid #B4CFEC;
}

// my html

<form name="details" method="post" action="#">
<fieldset>
<input type="text" name="email" size="35" value="email" />
<input type="submit" name="login" value="login" />
</fieldset></form>

Any thoughts?

Thanks,
Sid

Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
  • 2 Contributors
  • 6 Replies
  • 128 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by sid7

Dani AI

Generated

The effect you saw is a browser UI cue: when a form field has focus some browsers highlight the page's default/active submit control so users know what Enter will trigger. correctly identified that behaviour (and that IE6 renders it as an extra 1px overlay). That visual is useful for keyboard users, so removing it entirely harms accessibility. Two practical, safer choices are to override the UA focus styling for modern browsers or to toggle styling only while a text field has focus.

Here are two non-invasive approaches you can apply (neither repeats the code already in the thread):

  • CSS (modern browsers): remove the browser focus ring on the submit and provide a custom focus style for keyboard users. Use :focus-visible to keep focus indicators for keyboard navigation only.
input[type="submit"]:focus { outline: none; box-shadow: none; }

input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.25); /* accessible substitute */
}

/* only suppress the submit highlight when the preceding text input is focused */
input[type="text"]:focus + input[type="submit"] {
  outline: none;
  box-shadow: none;
}
  • JavaScript fallback (older browsers): add/remove a class on focus/blur of text fields so the submit gets a class that neutralizes the UA highlight. This works where CSS selectors or :focus-visible aren’t supported.
var submit = document.querySelector('input[type="submit"]');
var texts = document.querySelectorAll('input[type="text"], textarea');

texts.forEach(function(el){
  el.addEventListener('focus', function(){ submit.classList.add('suppress-focus'); });
  el.addEventListener('blur',  function(){ submit.classList.remove('suppress-focus'); });
});

Notes:

  • ’s pragmatic solution of using a plain button and scripting the submit (which used) removes the UA default highlight, but calling form.submit() programmatically does not fire the form’s onsubmit handlers. See the spec/MDN note on HTMLFormElement.submit() for details: HTMLFormElement.submit().
  • Prefer preserving or replacing focus indication rather than removing it. See :focus-visible for a way to show focus only for keyboard users: CSS :focus-visible.

Test across browsers (older IE can be stubborn), and choose the option that maintains keyboard accessibility while matching your visual design.

Recommended Answers

All 6 Replies

Member Avatar for Airshow

Sid,

The effect you describe is designed to indicate which button's action will be triggered if the user hits enter when a form element has focus.

Personally I think this is a good idea as it help avoid user error.

If you must be rid of the effect, then simple set the button's borrder-with to zero. eg:

#submitButton {
    border-width : 0;
}

I've only checked this in IE6 so you might like to do some more comprehensive tests.

Airshow

Member Avatar for sid7

Thanks for the response Airshow.

I tried your solution and it works. The only problem is, I have already defined a blue border for my submit button, so if I set border width to 0 I'll lose my own border.

Right now what happens is I click on my text field, and a new black border appears on top of the blue one I've defined.

Member Avatar for Airshow

Sid,

In that case I don't think you can avoid it. At least not in IE, which renders the effect as something in addition to the normal box-model.

If you set border-width to something large - eg. 99px - then you can see that the effect is an extra border always 1px wide. For some reason when border-width is set to zero then the effect disappears. At border-width 1px or greater the effect is always 1px.

It's a pain.

I'm using IE6 here. I'm not sure about other browsers.

Airshow

Member Avatar for sid7

ah, I understand. I guess I have to live with it.

Thanks for your time though, appreciated.

Sid

Member Avatar for Airshow

Sid,

But of course, I'm being stupid.

Just use a regular <input type="button" ...> instead, and script it to give a submit action.

<input type="button" name="login" value="Login" onclick="this.form.submit();" />

But beware that if you do this then the form's onsubmit="...." will not fire (should you need it). You have to script any onsubmit action in the Login button's onclick, prior to this.form.submit(); .

Airshow

Edited by Airshow because: n/a
Member Avatar for sid7

This works perfect! 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.