How to Create a Glowing Border Around an Input Field

Solutions with CSS properties

In this tutorial, you’ll find some methods of creating a glowing border around an input field with CSS properties.

In the example below, we add the :focus pseudo-class to the <input> element and then specify the border-color and box-shadow properties. Also, we set the outline property to “none”. Note: Removing the default outline can impact accessibility. Always provide an alternative focus indicator, such as the box-shadow or border used here.

Example of creating a glowing border around an input field:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        display: block;
        margin: 20px;
        overflow: auto;
        font-family: sans-serif;
        font-size: 18px;
        color: #444;
        text-shadow: 0 0 2px #000;
        padding: 20px 10px 10px 0;
      }
      input {
        width: 150px;
        border: 2px solid #aeaeb5;
        border-radius: 6px;
        font-size: 20px;
        padding: 2px;
        margin-top: -10px;
      }
      input:focus {
        outline: none;
        border-color: #26bf47;
        box-shadow: 0 0 10px #26bf47;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label>Enter your password:
        <input name="password" type="password" />
      </label>
      <label> Confirm your password:
        <input name="password-confirm" type="password" />
      </label>
    </form>
  </body>
</html>

Try it Yourself »

Result

<div class="demo"> <form action="/form/submit" method="post" target="_top"> <label> Enter your password: <input type="password"> </input> </label> <label> Confirm your password: <input type="password"> </input> </label> </form> </div> ### Example of creating a glowing border around an input field with the transition property:

Example of creating a glowing border with the transition property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 20px;
      }
      .text {
        border: 2px solid #b2b7c2;
        font-size: 22px;
        -webkit-transition: box-shadow linear 1s;
        transition: box-shadow linear 1s;
      }
      .text:focus {
        box-shadow: 0 0 20px #143b91;
      }
    </style>
  </head>
  <body>
    <input type="text" class="text" />
  </body>
</html>

Try it Yourself »

Here, we also applied the :focus pseudo-class to the <input> element. Then, we added the CSS transition property. (Note: The -webkit- prefix is included for legacy support but is generally unnecessary in modern browsers.)

Let’s see one more example.

Example of creating a glowing border around an input and textarea fields:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=text],
      textarea {
        transition: all 0.30s ease-in-out;
        outline: none;
        padding: 2px 0px 2px 2px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #aeb5bf;
      }
      input[type=text]:focus,
      textarea:focus {
        box-shadow: 0 0 5px rgba(0, 31, 153, 1);
        padding: 2px 0px 2px 2px;
        margin: 5px 1px 3px 0px;
        border: 1px solid rgba(0, 31, 153, 1);
      }
      label {
        width: 100px;
        float: left;
      }
      body {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <label for="name">Text Input:</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
      </div>
      <div>
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </div>
    </form>
  </body>
</html>

Try it Yourself »