title: Icon color not changing when focusing on input
body: <p>I have been trying a couple of methods here to make my font-awesome icon colored white as I focus on my input... but nothing seems to work.</p>
  <p>My code looks like this:</p>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;form id=&quot;form&quot;&gt;
      &lt;input type=&quot;password&quot; placeholder=&quot;Code&quot; required id=&quot;input&quot;&gt;
      &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-user-secret&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;hr&gt;
      &lt;br&gt;
      &lt;center&gt;
        &lt;button id=&quot;submit&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/center&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I've tried doing:</p>
  <pre class="lang-css prettyprint-override"><code>input:focus + .fas-fa-user-secret {
      color: #fff;
  }
  
  input:focus + .fas {
      color: #fff;
  }
  
  input:focus + .i {
      color: #fff;
  }
  </code></pre>
  <p>But none of the above CSS code works. Not even the text in the input is white, but whenever I remove the + and the rest it does work for input.</p>
  <p>Any help on this is appreciated, looked at every thread about making icons a different color when focusing on input.</p>
  <p>Thanks.</p>