'Change border color of <input> when selected

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.

enter image description here

I've tried the following

.input:focus {
  border: 5px solid #f23;
}

But it changes something else:

enter image description here

How can I change the color of the border?

<input type="text" className={styles.input} style={{ marginBottom: 10 }} autoComplete="off" autoCorrect="off" autoCapitalize="off" aria-required="true" spellCheck="false" placeholder="Email" ></input>
htmlcssnext.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions