title: CSS transition out after clicking input
body: <p>Run your mouse down the input fields.<br>
  It looks nice, this is the effect I want.<br>
  Now - click-hold on a field, see how it fades dark?<br>
  Let go the mouse button and observe how it snaps back to light instantly.</p>
  
  <p>I want to reverse this transition effect with the click behaviour:<br>
  It should go dark instantly and fade back to light after mouse click release.  </p>
  
  <p>Is this at all possible using ONLY CSS, while also retain the original hover effect?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    background: #aa7fce;
    border: 1px solid #4857bb;
    color: #4857bb;
    height: 24px;
    box-sizing: border-box;
    transition: background 0.5s linear 0s;
  }
  input:hover,
  input:focus {
    background: #E2C2FD;
    transition: none;
  }
  input:active {
    color: #E2C2FD;
    background: #4857bb;
    transition: background 0.5s linear 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text"&gt;
  &lt;input type="button" value="go"&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="name"&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="address"&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="phone"&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="city"&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="state"&gt;
  &lt;br&gt;
  &lt;input type="text" placeholder="country"&gt;</code></pre>
  </div>
  </div>
  </p>