How to Remove and Style the Border (Outline) around Text Input Boxes in Google Chrome

In the Google Chrome browser form fields such us <input>, <textarea> and <select> are regularly highlighted with blue or orange border around them on focus. It only happens on Chrome in order to tell that the input box is active. That is the default behavior of Google Chrome, but if you want to remove it to have clear fields in your forms you can do it with the help of CSS properties. We will show the steps below.

1. Create HTML

  • Create a <form> to add HTML forms to the web page for user input.
  • Create two <input> to define fields for user input. The first <input> with a type "text". Create a "no-outline" class name for the second <input>.
<form>
      <p>Ordinary input field with box outline:</p>
      <input type="text" placeholder="Enter Something">
      <p>Input field without outline:</p>
      <input type="text" class="no-outline" placeholder="Enter Something">
    </form>

2. Create CSS

input {
      border-top-style: hidden;
      border-right-style: hidden;
      border-left-style: hidden;
      border-bottom-style: groove;
      background-color: #eee;
      }
  • To have clear fields in your forms set the CSS outline property to its "none" value which is used to show no outline. Use also the :focus pseudo-class to style the form fields that are focused by the user.
.no-outline:focus {
      outline: none;
      }

Example of styling the border around text input boxes in Google Chrome:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background-color: #eee;
      }
      input {
      border-top-style: hidden;
      border-right-style: hidden;
      border-left-style: hidden;
      border-bottom-style: groove;
      background-color: #eee;
      }
      .no-outline:focus {
      outline: none;
      }
    </style>
  </head>
  <body>
    <form>
      <p>Ordinary input field with box outline:</p>
      <input type="text" placeholder="Enter Something">
      <p>Input field without outline:</p>
      <input type="text" class="no-outline" placeholder="Enter Something">
    </form>
  </body>
</html>

Removing the outline makes life more difficult because when many form fields are used or there are several forms in one page the users often don't know in which field they are typing.

Let’s consider this <form> example where several <input> fields are used. Every time the user clicks on a field, it gets a border color to show that the field is active.

Example of styling the border around text input boxes with outline:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input{
      padding:5px;
      margin-bottom:5px;
      }
      form, label {
      margin: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" /> 
      <input type="text" placeholder="some placeholder" />
    </form>
    <form>
      First name:<br>
      <input type="text" name="fname"><br> 
      Last name:<br>
      <input type="text" name="lname">
    </form>
    <form>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other
    </form>
    <form>
      <label for="field">Some form field</label>
      <input id="field" type="text" name="name">
    </form>
    <form>
      <label for="field1">Another form field</label>
      <input id="field1" type="text" name="name">
    </form>
    <form>
      <fieldset>
        <legend>Question</legend>
        <input type="radio" name="radio" id="radio">
        <label for="radio">Variant 1</label>
        <input type="radio" name="radio1" id="radio1">
        <label for="radio1">Variant 2</label>
      </fieldset>
    </form>
    </div>
  </body>
</html>

Example of styling the border around text input boxes without outline:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input{
      padding:5px;
      margin-bottom:5px;
      outline: none;
      }
      form, label {
      margin: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" />
      <input type="text" placeholder="some placeholder" /> 
      <input type="text" placeholder="some placeholder" />
    </form>
    <form>
      First name:<br>
      <input type="text" name="fname"><br> 
      Last name:<br>
      <input type="text" name="lname">
    </form>
    <form>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other
    </form>
    <form>
      <label for="field">Some form field</label>
      <input id="field" type="text" name="name">
    </form>
    <form>
      <label for="field1">Another form field</label>
      <input id="field1" type="text" name="name">
    </form>
    <form>
      <fieldset>
        <legend>Question</legend>
        <input type="radio" name="radio" id="radio">
        <label for="radio">Variant 1</label>
        <input type="radio" name="radio1" id="radio1">
        <label for="radio1">Variant 2</label>
      </fieldset>
    </form>
    </div>
  </body>
</html>

In the given example it is much more difficult for a user to fill the form when he/she doesn’t clearly see which input field is active at the moment.

That’s why it is recommended to remove the default outline and add your own style to the box to indicate that it is active when a user clicks on it.

Remove the outline and add a border style using the :focus and :active pseudo-classes with the <input> field. You can also remove the default borders on specific sides by setting them to "transparent".

Example of styling the border around the text input boxes using :focus and :active pseudo-classes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
      padding:5px;
      margin:5px 0;
      outline: none;
      }
      input:focus,
      input:active {
      border-color: transparent;
      border-bottom: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="myOutline">Click the input below to see how the styled outline appears.</label><br>
      <input type="text" id="myOutline" placeholder="Enter Something" />
    </form>
  </body>
</html>

See another example where the outline: none; is set for <input>, <textarea> and <select> fields.

Example of styling the border around the text input boxes using CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input,textarea{
      padding:5px;
      }
      span{
      display:block;
      padding:15px 0 3px;
      }
      input:focus, textarea:focus, select:focus {
      outline: none;
      }
    </style>
  </head>
  <body>
    <h3>Removed Input Highlighting for input, textarea and select form fields</h3>
    <form>
      <span>An input field:</span>
      <input type="text"> 
      <span>A textarea field:</span>
      <textarea></textarea>
      <span>A select field:</span>
      <select>
        <option>Select</option>
        <option>Select</option>
      </select>
    </form>
  </body>
</html>

Do you find this helpful?

Related articles