Avoid Focus Ring

Hi all,

I currently have 2 text fields and 1 button on my webpage. I was successful at removing the focus rings around the text fields, as this can be done through the inspector tool options. However the problem im facing is how to remove the focus ring from the button, after i enter the data in the text fields, i dont want my button to have any sort of focus ring.

You can’t. That behavior is controlled by the browser.

[quote=106414:@Jolly Kachhwaha]Hi all,

I currently have 2 text fields and 1 button on my webpage. I was successful at removing the focus rings around the text fields, as this can be done through the inspector tool options. However the problem im facing is how to remove the focus ring from the button, after i enter the data in the text fields, i dont want my button to have any sort of focus ring.[/quote]

Use a picture of the button in a canvas, and place the action code in the MouseDown event. To get the picture of the button, press shift-command-4 on the Mac or Alt-Prtsc on Windows, then edit in a picture editor such as Paint. Net (free download).

I wouldn’t suggest that. Each browser has its own idea of how buttons should look and you’ll never get them to match. Besides, doing it this way, you’ll also lose the user’s ability to TAB to the button and press a key which makes it impossible for many disabled users to use the screen.

Focus rings aren’t meant to be ugly, they are a clue to the user that if they press a key, the keystroke will go to that control.

[quote=106500:@Greg O’Lone]I wouldn’t suggest that. Each browser has its own idea of how buttons should look and you’ll never get them to match. Besides, doing it this way, you’ll also lose the user’s ability to TAB to the button and press a key which makes it impossible for many disabled users to use the screen.

Focus rings aren’t meant to be ugly, they are a clue to the user that if they press a key, the keystroke will go to that control.[/quote]

You are right, one looses all the keyboard navigation features of the button control. Yet, countless HTML based sites have for decades used pictures of buttons to their visitors satisfaction. I personally have nothing particular against focus rings, but the OP did request a way. I would not presume of his reasons, and simply attempted to provide an idea.

If you’re trying to tell the user whether the button should be or can be pressed, trying keeping it’s text style colour white or grey when it shouldn’t be pressed and black when it should.

In my opinion, the focus rings should only appear when controlling with the keyboard (pressing tab-key), some browsers however show and move the focus rings even when clicking the mouse. It seems this needs to be addressed by the browser manufacturers according to Xojo: <https://xojo.com/issue/31007>

To disable focus rings for buttons completely, you could inject a CSS like

input[type="button"]:focus { outline: none }
in the HTML header of the page. But be aware: http://outlinenone.com/

[quote=106919:@Tobias Bussmann]In my opinion, the focus rings should only appear when controlling with the keyboard (pressing tab-key), some browsers however show and move the focus rings even when clicking the mouse. It seems this needs to be addressed by the browser manufacturers according to Xojo: <https://xojo.com/issue/31007>

To disable focus rings for buttons completely, you could inject a CSS like

input[type="button"]:focus { outline: none }
in the HTML header of the page. But be aware: http://outlinenone.com/[/quote]

Hi, i tried the code above but its giving me an error. Can you kindly assist.

http://a11yproject.com/posts/never-remove-css-outlines/

http://www.outlinenone.com/

[quote=108510:@Rick Araujo]
http://www.outlinenone.com/[/quote]

Tobias Bussmann did mention that before, you know…

:stuck_out_tongue: interestingly seems that I skipped his reference.

My brain seemed stopped at this part:

input[type=“button”]:focus {
outline: none
}

You really want to give a good thinking to the fact that removing the focus ring will impair the ability to use your app with the keyboard. But if you really want to do that, copy this in the app HTML header :

[code]

[/code]

Then your buttons will be as dumb as an HTML page false button…