Firefox Issue: Red border around Input text element on focus change

Question

The goal is to render a form with multiple input fields.

Expected result: All the input fields have consistent styling
Actual result: Email field renders red border after entering data & changing focus.

This only happens with Firefox and not with Chrome.

I have tried adding a solution from stackoverflow but that didn't change anything, I am using Bootstrap for the most part.

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

Code from a the component is:

<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>

And the function that is called :

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

try this :

input:required {
    box-shadow: none;
}

or :

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