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;
}