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

Question

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 f

Answer 1

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.

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
}

Read more here.