title: Change border color of <input> when selected
body: <p>I'm coding a login screen for a next.js app and when I select a  the color of the border becomes this white+blue mix.</p>
  <p><a href="https://i.stack.imgur.com/R2yKa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R2yKa.png" alt="enter image description here" /></a></p>
  <p>I've tried the following</p>
  <pre><code>.input:focus {
    border: 5px solid #f23;
  }
  </code></pre>
  <p>But it changes something else:</p>
  <p><a href="https://i.stack.imgur.com/9DVsT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9DVsT.png" alt="enter image description here" /></a></p>
  <p>How can I change the color of the border?</p>
  <pre><code>&lt;input type=&quot;text&quot; className={styles.input} style={{ marginBottom: 10 }} autoComplete=&quot;off&quot; autoCorrect=&quot;off&quot; autoCapitalize=&quot;off&quot; aria-required=&quot;true&quot; spellCheck=&quot;false&quot; placeholder=&quot;Email&quot; &gt;&lt;/input&gt;
  </code></pre>