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  color: #fff;
25  font-size: 15px;
26  background-color: transparent;
27  box-shadow: 3px 3px 10px rgba(0,0,0,1),
28  -1px -1px 6px rgba(255, 255, 255, 0.4);
29}
30
31.input:focus {
32  border: 2px solid transparent;
33  color: #fff;
34  box-shadow: 3px 3px 10px rgba(0,0,0,1),
35  -1px -1px 6px rgba(255, 255, 255, 0.4),
36  inset 3px 3px 10px rgba(0,0,0,1),
37  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
38}
39
40.container .input:valid ~ .label,
41.container .input:focus ~ .label {
42  transition: 0.3s;
43  padding-left: 2px;
44  transform: translateY(-35px);
45}
46
47.container .input:valid,
48.container .input:focus {
49  box-shadow: 3px 3px 10px rgba(0,0,0,1),
50  -1px -1px 6px rgba(255, 255, 255, 0.4),
51  inset 3px 3px 10px rgba(0,0,0,1),
52  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
53}