Removing the dotted focus border inside a button

[bsbarker]

I'm using <input type='button' class='button' onclick='myFunction()' /> to call a function, and I'm using CSS to replace the standard button graphic with a round image. Is there a way to get rid of the dotted border that appears inside a button when you click it? Since my image is round, that dotted border sticks out on the "corners" and makes the image look a bit messy.

The border disappears when focus is removed from the button (aka onblur), as in clicking elsewhere or tabbing off of the button. So one idea I had was to automatically remove focus from the button when it is clicked:

i.e.

<input type='button' class='button' onclick='myFunction(); focusElsewhere' />

But I don't know how to do that. Does anyone else know? Or do you have other ideas how to accomplish what I'm trying to do here?

Let me know if you need me to post the CSS I'm using to replace the button graphic.

Thanks!

[tedster]

Try adding the attribute hidefocus="true" to your input element. It used to work anyway.

Side note: it is usually not a good idea to obscure the focus event. Doing so sacrifices usability and accessibility for non-visual browsers. But it's your decision whether to make that trade-off.

[bsbarker]

Thanks, tedster, the hidefocus attribute worked.

However, taking non-visual browsers into consideration (which I've never done, so I wonder how compatible my site is anyway), can you think of a way to use the onclick attribute to move the focus to a different element instead of supressing the focus of my input element?

I suppose that would still make it inconvenient for a non-sighted user, though. Since the button is meant to be pushed multiple times, they would have to tab back to it each time. Just brainstorming here, mostly out of curiosity.

Do any alternative solutions come to mind?

[tedster]

Nothing has ever come to mind or I would have shared it. The dotted line is a browser-specific affectation that has always been kind of ugly to my eyes, but I've finally quit worrying about it. Users of a browser that displays focus that way are used to it, I figure. So now I just let things go to default status.

Note that the "hidefocus" attribute is Microsoft-specific mark-up and it does not validate.

[edited by: tedster at 8:38 pm (utc) on May 16, 2010]

[bsbarker]

Okay, thanks again for the input. I'll consider whether or not to use the hidefocus attribute, but either way it's good to know that it works at least.

[kaled]

Try this...

<input type="button" onclick="this.blur(); myFunction(); return true;" />

NOTE: Even if this appears to work, my recommendation would be to forget about this problem rather than use the code above because there may be compatibility issues on complex pages.

Kaled.

[bsbarker]

kaled, that works very well. It shows the focus border "onMouseDown" and removes it "onMouseUp", showing the user that their click did something but also preserving the appearance of the image. It also allows the user to tab to the button if desired.

This is a good alternative to the "hidefocus" attribute, but the problem remains that a user must tab back to the button each time they wish to push it. Still diciding if this is something I need to consider for my particular website. Both you and tedster are far more experienced than I am, so I do put weight in the fact that you both recommend against toying with the focus border at all.

One question on the possible compatibility issues you mentioned. If the code is not compatible in certain situations, will the code simply be ignored or might it break something?

[kaled]

When designing, it's easy to get caught up with unimportant details.

Compatibility issues could arise depending on how the blur() method is implemented. My understanding is that the next control in the tab-order is supposed to be focused - this is pretty silly - so my guess is that browser writers do something else. If blur() is implemented this way, then it really ought to be called focusNext() instead.

Kaled

[bsbarker]

I agree, that would make more sense. Okay, well thanks again for your input.