title: How to make textbox border color fade in on focus using JavaScript or jQuery
body: <p>How can I make the color of the textbox border fade into another color when it is focused? For example if the border color was #ddd then the user focused on the textbox it would fade into #0266C8 and when they unfocus it fades into #ddd again. Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Project&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function passwordCheck(y){
      var x = y.value;
      if(x.length&gt;5) {
          document.getElementById("error").innerHTML="Limit is 5 characters";
      } else {
          if(x.length&lt;6) {
              document.getElementById("error").innerHTML="";
          }
      }
  }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  body {
      margin:auto;
      font-family:arial, sans-serif;
      padding-top:100px;
  }
  .container {
      width:920px;
      margin:auto;
      text-align:center;
  }
  .main_text {
      font-family:"Bebas Neue";
      font-size:76px;
      color:green;
      margin-bottom:10px;
  }
  .textbox1 {
      border: 4px solid #ddd;
      width: 888px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 16px;
      padding-right: 16px;
      font-size: 2em;
      outline: none;
      font-family: sans-serif;
      border-radius:100px;
      height:48px;
  }
  .textbox1:focus {
      border: 4px solid #0266C8;
  }
  #error {
      font-size:24px;
      color:red;
      font-family:"Bebas Neue";
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;span class="main_text"&gt;Password Strength Checker&lt;/span&gt;&lt;br&gt;
      &lt;input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus&gt;&lt;br&gt;&lt;br&gt;
      &lt;div id="error"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help will be greatly appreciated. Thanks, Omar.</p>