1.inputContainer {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  gap: 10px;
6}
7
8#inputField {
9  border: 2px solid white;
10  background-color: transparent;
11  border-radius: 10px;
12  padding: 12px 15px;
13  color: black;
14  font-weight: 500;
15  outline: none;
16  caret-color: rgb(155, 78, 255);
17  transition-duration: .3s;
18  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
19}
20
21.userIcon {
22  position: absolute;
23  fill: rgb(155, 78, 255);
24  width: 12px;
25  top: -23px;
26  left: -15px;
27  opacity: 0;
28  transition: .2s linear;
29}
30
31.usernameLabel {
32  position: absolute;
33  top: -25px;
34  left: 5px;
35  color: white;
36  font-size: 14px;
37  font-weight: 400;
38  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
39  overflow: hidden;
40  transition: .2s linear;
41  opacity: 0;
42}
43
44#inputField:focus ~ .usernameLabel,
45#inputField:valid ~ .usernameLabel {
46  transform: translateX(20px);
47  opacity: 1;
48}
49
50#inputField:focus ~ .userIcon,
51#inputField:valid ~ .userIcon {
52  transform: translateX(20px);
53  opacity: 1;
54}
55
56#inputField:focus,
57#inputField:valid {
58  background-color: #ddd;
59  transition-duration: .3s;
60}
61