1.input-container {
2  position: relative;
3  margin: 20px;
4}
5
6label {
7  display: block;
8  margin-bottom: 5px;
9  color: #333;
10}
11
12.input[type="text"] {
13  padding: 10px;
14  font-size: 16px;
15  border: none;
16  border-radius: 4px;
17  background-color: #f1f1f1;
18  color: #333;
19  width: 200px;
20  outline: none;
21}
22
23.underline {
24  position: absolute;
25  bottom: 0;
26  left: 0;
27  width: 0;
28  height: 2px;
29  background-color: #4158D0;
30  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
31  transition: width 0.3s;
32}
33
34.input[type="text"]:focus + .underline {
35  width: 100%;
36}
37
38@keyframes floating-label {
39  0% {
40    transform: translateY(0);
41    opacity: 1;
42  }
43
44  100% {
45    transform: translateY(-25px);
46    opacity: 0;
47  }
48}
49
50.input[type="text"]:placeholder-shown + label {
51  position: absolute;
52  top: 50%;
53  left: 10px;
54  transform: translateY(-50%);
55  font-size: 14px;
56  color: #777;
57  pointer-events: none;
58  transition: transform 0.3s, font-size 0.3s, color 0.3s;
59}
60
61.input[type="text"]:focus:not(:placeholder-shown) + label {
62  transform: translateY(-25px);
63  font-size: 12px;
64  background-color: #4158D0;
65  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
66  animation: floating-label 0.3s forwards;
67}
68