我已经参考了一些帖子和这个堆栈溢出链接：Set input as invalid，但没有太多帮助。
我试图实现的是一个正常的样式输入，当用户聚焦我们改变了边框颜色的输入时。当我们有一个有效的值时，我们用input:valid设置它的样式，否则我们用input:invalid设置它的样式。
我几乎已经做到了这一点，但是输入:invalid style被用作默认值。我想让边框/背景一开始是透明的。
代码语言：javascript复制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;
}代码语言：javascript复制