Целью является визуализация формы с несколькими полями ввода.
Ожидаемый результат: все поля ввода имеют одинаковый стиль Фактический результат: 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" });
}
}
}