1.container {
2  display: flex;
3  flex-direction: column;
4  gap: 7px;
5  position: relative;
6}
7
8.container .label {
9  font-size: 15px;
10  padding-left: 10px;
11  position: absolute;
12  top: 13px;
13  transition: 0.3s;
14  pointer-events: none;
15}
16
17.input {
18  width: 200px;
19  height: 45px;
20  border: none;
21  outline: none;
22  padding: 0px 7px;
23  border-radius: 6px;
24  background-color: transparent;
25  box-shadow: 3px 3px 10px rgba(0,0,0,1),
26  -1px -1px 6px rgba(255, 255, 255, 0.4);
27}
28
29.input:focus {
30  border: 2px solid transparent;
31  color: #fff;
32  box-shadow: 3px 3px 10px rgba(0,0,0,1),
33  -1px -1px 6px rgba(255, 255, 255, 0.4),
34  inset 3px 3px 10px rgba(0,0,0,1),
35  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
36}
37
38.input:focus.input::placeholder {
39  transition: 0.3s;
40  opacity: 0;
41}
42
43.input:focus + .label {
44  transition: 0.3s;
45  padding-left: 2px;
46  transform: translateY(-35px);
47}
48