title: css selector when focus is removed from input
body: <p>I have an input element.</p>
  <ol>
  <li>The element has Black border initially.</li>
  <li>I'm applying blue border to it when the element is focused.</li>
  </ol>
  <p><strong>Requirement</strong>: Now when I remove the focus from it, I want the border to be red.</p>
  <p>I tried with <code>input:not(focus)</code> but it's changing the initial state also.</p>
  <p><a href="https://jsbin.com/pudecat/edit?html,css,output" rel="nofollow noreferrer">jsbin link</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    border: none;
    border-bottom: 2px solid black;
    outline: none;
    transition: 0.4s ease-out;
  }
  
  input:focus {
    border-bottom: 2px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="field"&gt;
      &lt;input type="text" required&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>