How to Remove and Style the Border Around Text Input Boxes in Google Chrome

In Google Chrome, form fields such us <input>, <textarea> and <select> are regularly highlighted with blue or orange borders on focus. It only happens on Chrome to tell that the input box is active. That is the default behavior of 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.

Create HTML

  • Use a <form> element to add HTML forms to the web page for the user input.
  • Add two <input> elements to define fields for the user input. With the first <input> use the "type" and "placeholder" attributes. With the second <input> besides these attributes, also use a class name.
<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>

Add 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 display no outline. Also, use the :focus pseudo-class to style the form fields that are focused by the user.
.no-outline:focus {
  outline: none;
}

Example of adding only a bottom border to the text input box:

<!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 may cause difficulties because when many form fields are used, or there are several forms on one page, users often don't know in which field they are typing.

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

Example of styling borders around text input boxes:

<!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="radio" id="radio1">
        <label for="radio1">Variant 2</label>
      </fieldset>
    </form>
  </body>
</html>

Example of adding borders around text input boxes without any color on focus:

<!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>
  </body>
</html>

So, in the example above, it is much more difficult for the user to fill the form when they don’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 preferred style to the box to indicate that it is active when clicking on it.

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

Example of styling the border around the text input boxes with the :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 removing input highlighting:

<!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