Firefox 问题：焦点更改时输入文本元素周围的红色边框答案

【问题标题】：Firefox Issue: Red border around Input text element on focus changeFirefox 问题：焦点更改时输入文本元素周围的红色边框
【发布时间】：2020-07-11 17:22:51
【问题描述】：

目标是呈现具有多个输入字段的表单。

预期结果：所有输入字段的样式一致
实际结果：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" });
  }
 }
}

【问题讨论】：

试试这个：input:focus { outline-width: 0;} 或者一般来说，影响所有基本表单元素：input:focus, select:focus, textarea:focus,button:focus { outline: none;}
你的图案有问题吗？似乎您只接受带有pattern="[A-Za-z ]+" 的大写和小写字母，因此输入“有效”电子邮件时触发错误边框是有道理的。
请参阅：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… 了解您的模式
@G-Cyrillus，非常感谢，我刚刚尝试过，现在似乎可以了。
@Gh05d 谢谢，你说得对，我把模式改成了pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2, 4}$"，问题暂时不存在了。

标签： javascript html css reactjs firefox

【解决方案1】：

试试这个：

input:required {
    box-shadow: none;
}

或：

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

【讨论】：

我会试试这个。感谢您的解决方案。