Firefox 問題：焦點更改時輸入文本元素周圍的紅色邊框

Question

目標是呈現具有多個輸入字段的表單。

預期結果：所有輸入字段都具有一致的樣式
實際結果：輸入數據和更改焦點后， Email字段呈現紅色邊框。

這只發生在 Firefox 而不是 Chrome。

我曾嘗試從 stackoverflow 添加一個解決方案，但這並沒有改變任何東西，我大部分時間都在使用 Bootstrap。

.form-control:focus { box-shadow: none; }

來自組件的代碼是：

<div className="col-6 cformrow">
 <label className="float-left">Email*</label>
  <input 
   className="form-control px-4 py-2"
   type={"email"}
   name={"PrimaryEmail"}
   pattern="[A-Za-z ]+"
   value={this.state.PrimaryEmail}
   onChange={this.getDetails}
  />

 <small className="form-text text-left text-danger p-absolute">  
  {this.state.PrimaryEmailerror}
 </small>
</div>

以及被調用的函數：

getDetails = event => {
 if (event.target.name === "PrimaryEmail") {
  if (event.target.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
   this.setState({ [event.target.name + "error"]: "" });
  } else {
   this.setState({ PrimaryEmailerror: "Please enter a valid email" });
  }
 }
}

Answer 1

嘗試這個 ：

input:required {
    box-shadow: none;
}

或者 ：

::-moz-focus-inner {
    border: 0;
    padding: 0;
}