CSS
How to remove input border highlight with CSS?
In this blog article, we will learn How to remove input border highlight with CSS.
When we have an input element on a web page and the user hovers over that input to write something, a border appears around the input to highlight the element.
We can choose to remove the highlight from the input element & this can be done by applying the CSS to the input element.
How to remove input border highlight with CSS?
If you want to remove the highlight of the input border, we have to use a CSS property outline and set it to none.
This has to be applied to the input:focus element.
With the help of this property, the highlighted border will not appear as a user hovers over the input element or even if he starts writing something in the textbox, there will be no border displayed.
Let’s check this with the following code demonstration.
CSS :-
input:focus {
outline: none;
}
HTML :-
<input type="text" name="user" />
Output :-
Recap
In this way, we have come to the end of the article and we have simply learned the CSS property outline: none; to remove the input border highlight.
