Clash Royale CLAN TAG#URR8PPP

WCAG: Firefox and Edge don't show outline on focussed input elements when styles are applied

I'm creating a form, that is following some WCAG guidelines. One of those is:

G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over.

The summary of this rule is:

Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds. However, many platforms allow the user to customize the rendering of this focus indicator. Assistive technology can also change the appearance of the native focus indicator. If you use the native focus indicator, any system-wide settings for its visibility will carry over to the Web page. If you draw your own focus indicator, for example by coloring sections of the page in response to user action, these settings will not carry over, and AT will not usually be able to find your focus indicator.

^{(emphasis mine)}

In order to comply with this rule, I want to keep the OS' default focus indicator for form elements.

However, I'm facing different problems here.

In Firefox on macOS:

As soon as the I change the style of the element (e.g. by changing the border settings), the default focus gets lost¹.

This is strange as border and outline are different style attributes.

border

outline

In Firefox and Edge on Windows:

The browsers show a focus indicator that is only a differently colored border, when entering a form element – as long as it's unstyled. Chrome on the other hand does have an indicator as an outline – like on macOS².

Here's a snippet to demonstrate the behaviour (alternatively try this fiddle):

.b
border: 1px solid red;


<form>
<input class="a" type="text">
<input class="b" type="text">
</form>

As a sidenote: There is no difference in the behaviour if label-elements are present or not.

label

My questions are:

With these issues, I wonder whether this rule is even possible to achieve. In the end maybe I must manually set outline on focus to get the same behaviour in all browsers and skip this rule.

outline

focus

¹ Here's a screenshot showing the problem on macOS:

² Here's a screenshot showing the problem on Windows:

3 Answers
3

Each browser has its own properties. As I searched you should code like below:

input.b
border: 1px solid #f00;
-webkit-appearance: none;
-moz-appearance: none;


input.b:focus
outline: none;
box-shadow: 0 0 1px 1px #0a0;



If you wanna read more about this concept, See MDN Docs to understand.

Hope, my answer helps you.

HTML

CSS

UI

CSS reset

As you've notced already, appearance and behaviour of form elements are implementation-based and differs from browser to browser.

Every form element has its browser-default appearance -- a set of styles such as border, background etc.

border

background

When you're trying to change default styles, browser may override them rule-by-rule (as Chrome does) or discard the default appearance at all (as Firefox does).

So if you want to have the same appearance in "all" browsers you have to set it explicitly.

E.g.:

.b
border: 1px solid red;
-moz-appearance: none;
-webkit-appearance: none;


.b:focus
outline: none;
box-shadow: 0 0 2px 2px lime


<input class="a" type="text">
<input class="b" type="text">

Read more here.

outline

border

The CSS outline property does exist and you can use it like this:

outline

.b
border: 1px solid red;
-moz-appearance: none;
-webkit-appearance: none;


input:focus
outline: 2px solid #2772DB;


<input class="a" type="text">
<input class="b" type="text">

If its not working or showing up, that may mean there is another style overlapping it so you can override it by adding !important

!important

outline

border

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.