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

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

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

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

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