How to remove focus border (outline) around textbox on focus using CSS

When you focus on a textbox or input box on a web page, it typically displays a blue or black border. This feature is crucial for distinguishing which textbox is active, especially when multiple textboxes are present. However, there are instances where you might want to remove these borders on focus. You can achieve this by using the outline property in CSS.

🚀 At the end of this article, I have shared two examples showing how to use the "outline" property in JavaScript.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  input { 
    border:solid 1px #f5f5f5; 
    border-radius: 5px; 
    padding: 10px;
    outline: none;    /* remove outline or default border around textbox. */
  }
</style>
</head>

<body>
  <input type='text' id='tb'>
</body>
</html>

Try it

Using outline property within Pseudo :focus Class

Here's another example. You can use CSS outline property within Pseudo :focus class.

In this case the "outline" property is implemented only after the textbox gains focus. Here's an example.

<!DOCTYPE html>
<html>
<head>
<style>
  input { padding: 10px; }
  input:focus { 
    border: none;
    outline: none;	 /* remove the outline property and see what happens. */
  }
</style>
</head>

<body>
  <input type='text' id='tb'>
</body>
</html>

Try it

Using CSS "outline" property in JavaScript

You can use the outline property in JavaScript to remove focus border around textbox. You can add an event listner to check if "focus" is on a textbox.

<!DOCTYPE html>
<html>
<head>
<style>
  input { padding: 10px; border: solid 1px #f5f5f5; }
</style>
</head>

<body>
  <input type='text' id='tb' value=''>
</body>

 <script>
     document.getElementById('tb').addEventListener('focus', function () {
         this.style.outline = 'none';
     });
  </script>
</html>

Try it

Or, you can use "window.addEventListener()".

<body>
  <input type='text' id='tb' value=''>
</body>

 <script>
    // Add an event listner to check if the focused element is a textbox.
    window.addEventListener('focus', function (e) {
      if (e.target.tagName === 'INPUT' && e.target.type === 'text') {       // If its a textbox, set outline to "none".
        e.target.style.outline = 'none';
      }
    }, true);
  </script>

← Previous