Strongly discouraged to remove entirely due to accessibility. But modifying is okay. Right?
It’s all about :focus, and the corresponding outline property. For the :active state as well although you don’t need to set outline: none on this.
Can also leave the outline there just customize it using the shorthand (similar to border) or the individual properties:
outline-width: 3px;
outline-style: solid;
outline-color: teal;The box-shadow property is powerful. Can control offset, opacity, blur, spread-radius, etc. This comes in handy for the input elements. Try something like this:
box-shadow: 0, 0, 0, rgba(0, 128, 128, .40) // teal