Почему input: invalid используется по умолчанию вместо основного стиля ввода?

Question

Я ссылался на некоторые посты и эту ссылку на stackoverflow: Установить ввод как недействительный , но это не сильно помогло.

То, что я пытаюсь достичь, - это ввод нормальных стилей, когда пользователь фокусирует ввод у нас цвет рамки изменился. Когда у нас есть допустимое значение, мы стилизуем его с помощью input: valid, иначе мы стилизуем его с input: invalid.

Я почти достиг этого, однако стиль input: invalid используется по умолчанию. Сначала я хочу, чтобы границы и фон были прозрачными.

body {
  height: 100vh;
  display: grid;
  align-items: center;
  margin: 0;
  padding: 0 60px;
}

div {
  display: grid;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

input:focus,
input:hover {
  border-bottom-color: dodgerblue;
}

input:invalid {
  border-bottom-color: red;
  background: red;
  color: white;
}

input:valid {
  border-bottom-color: green;
  background: green;
  color: white;
}

input:valid+.icon:after {
  font-family: "Font Awesome 5 Free";
  content: "\f599";
  color: white;
  font-weight: 900;
}

input:invalid+.icon:after {
  font-family: "Font Awesome 5 Free";
  content: "\f119";
  font-weight: 900;
  color: white;
}

.icon {
  position: absolute;
  right: 0;
  height: 35px;
  width: 35px;
  display: grid;
  place-items: center;
}

input {
  border: none;
  outline: none;
  border-bottom: 2px solid black;
  height: 35px;
  padding: 10px;
  padding-right: 35px;
  box-sizing: border-box;
  transition: all 500ms linear;
}

<div>

  <input type="email" pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+" title="enter your email" placeholder="enter your email" required>
  <span class="icon">
        
      </span>
</div>

Answer 1

Вы можете использовать :placeholder-shown селектор для пустого состояния. Для элементов input имеется селектор :blank, но в настоящее время он экспериментальный.

body{
  height:100vh;
  display:grid;
  align-items:center;
  margin:0;
  padding:0 60px;
}
div{
  display:grid;
  position:relative;
  max-width:500px;
  margin:0 auto;
}

input:focus,input:hover{
  border-bottom-color:dodgerblue;
}
input:invalid{
  border-bottom-color:red;
  background:red;
  color:white;
}
input:valid{
  border-bottom-color:green;
  background:green;
  color:white;
}
input:valid + .icon:after{
  font-family: "Font Awesome 5 Free";
   content:"\f599";
  color:white;
  font-weight:900;
}
input:invalid + .icon:after{
  font-family: "Font Awesome 5 Free";
  content:"\f119";
  font-weight:900;
  color:white;
}
.icon{
  position:absolute;
  right:0;
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
}
input{
  border:none;
  outline:none;
  border-bottom:2px solid black;
  height:35px; 
  padding:10px;
  padding-right:35px;
  box-sizing:border-box;
  transition:all 500ms linear;
}
input:placeholder-shown {
  border-bottom-color:pink;
  background:pink;
  color:black;
}

<div>

  <input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="enter your email"
    placeholder="enter your email"
    required>
  <span class="icon">

  </span>
</div>