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

In Google Chrome, form fields such as <input>, <textarea> and <select> are regularly highlighted with blue or orange borders on focus. This is a standard browser behavior to indicate that the input box is focused. While you can customize or 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 <span class="attribute">type</span> and <span class="attribute">placeholder</span> attributes. With the second <input> use the same attributes.

How to create HTML <input> tags inside an HTML <form> tag?

<form>
  <p>Ordinary input field with box outline:</p>
  <input type="text" placeholder="Enter Something" />
  <p>Input field without outline:</p>
  <input type="text" 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 <a href="/learn-css/border-bottom-style.html">border-bottom</a> 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.

How to style an HTML element using CSS border-top-style, border-right-style, border-left-style, border-bottom-style and background-color properties?

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 border */
}

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

An example of how to remove and style the border (Outline) around text input boxes in Google Chrome?

<!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 border */
      }
    </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" placeholder="Enter Something" />
    </form>
  </body>
</html>

Try it Yourself »

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>

Try it Yourself »

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

Try it Yourself »

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 focused 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 focused when interacting with it.

Remove the outline and add a border style using the <span class="property">:focus</span> pseudo-class. You can also use <span class="property">:active</span> for mouse-click interactions. 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-width: 2px;
        border-style: solid;
        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>

Try it Yourself »

See another example where the <span class="property">outline: none;</span> 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>

Try it Yourself »

Warning

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. Consider using the :focus-visible pseudo-class for modern browsers to maintain keyboard accessibility while allowing custom styling.