Remove Orange Outline on Forms in Google Chrome Browsers OnFocus

Have you noticed that when you click an input, textarea, or select field on Google Chrome browser you will see a yellow orange outline or border. Sometimes it doesn’t look good with your design. Actually, Safari also have this issue. The difference is Safari have blue outline when you click on form fields.

Here’s a quick solution on your problem when you click an input, textarea, or select form types in Google Chrome.

Most of web designers ignore this behavior, but to those who have better eyes on design, it’s annoying.

Chrome and Safari form input outline issue

Just copy the CSS code below:

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

I would recommend to always add this on all of your CSS files. You may include it in your CSS Reset.

*Some links may contain affiliate links. I may get small commission from your purchases to fund this website and to avoid annoying ads.