title: Can't change border color when input field is active
body: <p>I can't change border color when the input field is active. I tried using input:active, input:focus. What I want is the color of input's border to change when user clicks on it.</p>
  <p>The CSS code :</p>
  <pre><code>input {
      margin-top: 20px;
      border-radius: 0px;
      background-color: #FFFFFF;
      border: 1px solid black;
      height: 33px;
      width: 200px;
  
      &amp;:active {
        font-size: 13px;
        border: 2px solid Red;
        background-color: #ffffff;
      }
  
      &amp;:disabled {
        border: 1px #Black;
        border-radius: 0px;
        background-color: #F9FAFB;
      }
  </code></pre>
  <p>HTML Code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;form&gt;
        &lt;label for=&quot;input-field&quot;&gt;Text&lt;/label&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;...&quot;&gt;
        &lt;button&gt;..&lt;/button&gt;
      &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>