How to remove outline around text input boxes in chrome using CSS?
The text input boxes in chrome are highlighted with colors on focus. This highlighted focus outline can be removed using CSS. In this tutorial, we will be learning about the CSS properties to remove input text box outline in chrome.
Using CSS outline property
The CSS outline property can be used to remove the outline from the text input boxes. Use focus class with outline:none property to the text input box to remove outline in chrome browser.
Example: Removing focused outline from the text box
Here is the example for removing the highlighted outline from the text input box in chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.no-outline:focus {
outline: none;
}
</style>
</head>
<body>
<h2> Default text box </h2>
<input type="text" class="outline" placeholder="Enter something">
<h2> Textbox with no-outline </h2>
<input type="text" class="no-outline" placeholder="Enter something">
</body>
</html>
Output
Here is the output of the above program.
Example: Remove the outline from the input text box, textarea, and select box
Not only input text box but we can remove the outline from select box and textarea as well. We will use the same property for them too.
Conclusion
We can remove the outline of the input text field using the CSS outline property. This outline property can be used to textarea as well as a select box to remove the outline.
