Firefox Проблема: красная рамка вокруг элемента ввода текста при изменении фокуса - PullRequest
0 голосов
/ 31 марта 2020

Целью является визуализация формы с несколькими полями ввода.

Ожидаемый результат: все поля ввода имеют одинаковый стиль Фактический результат: Email поле отображает красную рамку после ввода данных и изменения фокуса.

Это происходит только с Firefox, а не с Chrome.

Screenshot from Firefox

Я пытался добавить решение из 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" });
  }
 }
}

1 Ответ

0 голосов
/ 31 марта 2020

попробуйте это:

input:required {
    box-shadow: none;
}

или:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...