How to remove the default outline from input boxes using CSS?

Some browsers like Google Chrome, use a default black color outline to highlight the input elements(<input>, <textarea> and <select>) when we focus on them. Something like this:

Remove default outline from input boxes

But some of you might find this behavior annoying and want to get rid of this default outline. If you want to remove this default outline from input boxes, you can easily do this by setting their outline property to none.

Here is a fully working example:

Example:

input{
    outline: none;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts