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

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.