1/* use it in dark theme */
2.input-container {
3  position: relative;
4  margin: 50px auto;
5  width: 190px;
6}
7
8.input-container input[type="text"] {
9  font-size: 20px;
10  color: rgb(255, 255, 255);
11  border: none;
12  border-bottom: 2px solid #a5a2a2;
13  outline: none;
14  width: 100%;
15  background-color: transparent;
16}
17
18.label {
19  transition: all 0.3s ease;
20  color: #d3d2d2;
21  position: absolute;
22  top: 0;
23  left: 0;
24  pointer-events: none;
25}
26
27.input-container input[type="text"]:focus~.label,
28        .input-container input[type="text"]:valid~.label {
29  top: -20px;
30  transition: 0.3s;
31  color: rgb(172, 46, 172);
32}
33
34.input-container .underline {
35  position: absolute;
36  bottom: 4px;
37  left: -7px;
38  height: 2px;
39  width: 110%;
40  background-color: rgb(172, 46, 172);
41  transform: scaleX(0);
42}
43
44.input-container .sideline {
45  position: relative;
46  bottom: 15px;
47  right: 18px;
48  height: 2px;
49  width: 18%;
50  background-color: rgb(172, 46, 172);
51  transform: scaleX(0);
52  rotate: 90deg;
53}
54
55.input-container .upperline {
56  position: absolute;
57  bottom: 30px;
58  left: -8px;
59  height: 2px;
60  width: 110%;
61  background-color: rgb(172, 46, 172);
62  transform: scaleX(0);
63}
64
65.input-container .line {
66  position: relative;
67  bottom: 17px;
68  left: 178px;
69  height: 2px;
70  width: 18%;
71  background-color: rgb(172, 46, 172);
72  transform: scaleX(0);
73  rotate: 90deg;
74}
75
76.input-container input[type="text"]:focus~.underline,
77        .input-container input[type="text"]:valid~.underline {
78  transform: scaleX(1);
79  transition: 1s;
80}
81
82.input-container input[type="text"]:focus~.sideline,
83        .input-container input[type="text"]:valid~.sideline {
84  transform: scaleX(1);
85  transition: 1s;
86}
87
88.input-container input[type="text"]:focus~.upperline,
89        .input-container input[type="text"]:valid~.upperline {
90  transform: scaleX(1);
91  transition: 1s;
92}
93
94.input-container input[type="text"]:focus~.line,
95        .input-container input[type="text"]:valid~.line {
96  transform: scaleX(1);
97  transition: 1s;
98}