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

Source Code: (back to article)

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