Remove input border highlights using CSS

It is too much disgusting to show unwanted default input border highlights while you want to make an attractive custom design. Isn’t it?

There are also a few ways to remove input border highlights that can make your input border look much better.

Different ways to remove input border highlights

1: Remove border outline

If you want to remove the input border on all input text elements of your website, then the following code will help you. 

input {
 outline:none;
}

2: Change border outlines width

If you make outline width 0, it will also remove border highlight. 

input.middle:focus {
    outline-width: 0;
}

3: Specify input elements from which types you want to remove the highlight 

You can specify different types of input elements to remove border highlights at once. Use dynamic pseudo-class :focus to remove the outline. You can do it also by making outline-width: 0;

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

4: Disable all default highlighted borders at once

It is a little bit confusing that border highlight is an outline or shadow? I think it is an outline. You can disable all focus outlines at once by the following code.

*:focus {
    outline: none;
}

Note: You can also use CSS classes or IDs to remove input border highlights.