选择时更改 <input> 的边框颜色

Question

我正在为 next.js 应用程序编写登录屏幕，当我选择一个时，边框的颜色变成了这种白色+蓝色的混合。

我尝试了以下方法

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

但它改变了其他东西：

如何更改边框的颜色？

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

Answer 1

您正在查看的可能是一个大纲： https://www.w3schools.com/css/css_outline.asp

要么创建您的 outline: none; 并使用 border 属性，要么只是重新设置大纲的样式：

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