1.inputContainer {
2  position: relative;
3  margin-bottom: 20px;
4}
5
6.customInput {
7  width: 100%;
8  padding: 12px;
9  font-size: 16px;
10  background-color: transparent;
11  border: none;
12  border-bottom: 2px solid #007bff;
13  outline: none;
14  transition: border-color 0.3s ease;
15  color: #007bff;
16}
17
18.customInput:focus,
19.customInput:not(:placeholder-shown) {
20  border-color: #0056b3;
21}
22
23.inputLabel {
24  position: absolute;
25  top: 0;
26  left: 0;
27  pointer-events: none;
28  padding: 5px;
29  font-size: 16px;
30  color: #007bff;
31  transition: transform 0.3s ease, color 0.3s ease;
32}
33
34.customInput:focus + .inputLabel,
35.customInput:not(:placeholder-shown) + .inputLabel {
36  transform: translateY(-100%) translateX(-5px) scale(0.8);
37}
38
39.inputUnderline {
40  position: absolute;
41  bottom: 0;
42  left: 0;
43  width: 100%;
44  height: 2px;
45  background-color: #007bff;
46}
47