1 
2<div class="container">
3  <input required="" type="text" name="text" class="input">
4  <label class="label">Username</label>
5</div>          

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