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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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[type="text"], input[type="password"], textarea: This targets all <input> elements of type "text" or "password", and all <textarea> elements on the page. This selector groups these elements together, so the same styles will apply to all of them.

  • border: none;: This removes the border around the input and textarea elements. By setting the border property to none, we're telling the browser not to draw any border around these elements.

  • outline: none;: This removes the outline around the input and textarea elements. By setting the outline property to none, we're telling the browser not to draw the default outline that appears when the element is focused.

  • border-bottom: 1px solid #ccc;: This adds a bottom border to the input and textarea elements. We're using the border-bottom property to add a solid, 1-pixel-wide border at the bottom of the element. The color of the border is #ccc, which is a light gray.

input[type="text"], input[type="password"], textarea {
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc; /* You can adjust the color and thickness of the outline */
}

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[type="text"],
      input[type="password"],
      textarea {
        border: none;
        outline: none;
        border-bottom: 1px solid #ccc; /* You can adjust the color and thickness of the outline */
      }
    </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>

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>
Note that the "outline" property is important for accessibility because it indicates to users who navigate using the keyboard where the focus is. If you remove it completely, it may make your website less accessible. If you do decide to style the outline, make sure it is still visible and meets accessibility guidelines.