facebook icon twitter icon angle down linkedin icon youtube icon
Home > Blog > input-border-css

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. 

Tarikul islam

About Torikul islam

Torikul islam is a professional web developer and affiliate marketer. Join Torikul to learn how to start a website and operate it well. He started his Web Developement career from Bangladesh Association of Software and Information (BASIS) in 2015. Later he continiued his journey to expanding knowledge and sharing it with others.

Write a Comment

No comment yet