Тип ввода электронной почты - удалить стиль по умолчанию

Question

У меня есть <input type="emai"> на моей html странице.

Когда электронное письмо недействительно, ввод получает :invalid CSS pseudo-classes, и граница становится красной.

Поскольку я использую пользовательский стиль ввода, который делает его ужасным

Answer 1

На входе может быть несколько псевдоклассов, но наиболее важными из них являются :active, :focus и в данном случае :invalid. Активен, когда вы нажали на вход, но не покинули мышь. Фокус, когда ваш курсор мигает внутри ввода и вы недопустим, вы знаете.

Вот код, который вы можете использовать. Кроме того, граница, о которой вы говорите, может быть свойством outline и находится в состоянии фокуса.

Вот код, который вы можете изменить соответствующим образом.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.input {
  height: 30px;
  width: 200px;
  color: black;
  font-family: Helvetica, Montserrat, Verdana, sans-serif;
  font-size: 20px;
}

input:active {
  background: rgba(4, 4, 4, 0.1);
  box-shadow: none;
}

.input:focus {
  outline: none;
  background: rgba(4, 4, 4, 0.1);
}

.input:invalid {
  border-color: black;
  box-shadow: none;
}

<input class="input" type="email" />

РЕДАКТИРОВАТЬ:

Firefox каким-то образом кажется box-shadow красного цвета на :invalid стиль. Просто добавьте box-shadow:none; в стиле :invalid, и у вас не останется ничего подобного.