How to get rid of yellow box decoration?

Question

On many of my input boxes I have a yellow outline that pops up when I select the box. How do I get rid of this?

Css lint are informing me that:

*:focus {
outline: none;
}

Should not be used and I quote. outlines should not be hidden unless other visual changes are made

When I try:

input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}

I also get a lint error message but appears to have worked.

Answer 1

Override CSS default outline property.

input {
   outline: none;
}