Input by AmIt-DasIT

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