Remove input border highlights using CSS
Last Updated on Dec 5, 2022 - Written By Torikul Islam
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.