更改邊框顏色<input>選擇時

Question

我正在為 next.js 應用程序編寫登錄屏幕，當我使用 select a 時，邊框的顏色變成了這種白色+藍色混合。

我試過以下

.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;
}