1.input {
2  position: relative;
3  max-width: 190px;
4  border: none;
5  box-shadow: 0px 1.5px 0px 0px #858585;
6  padding: .5rem;
7  transition: all 200ms ease-in-out;
8  opacity: .8;
9}
10
11.input-box {
12  display: flex;
13  flex-direction: column;
14}
15
16.input-label {
17  font-size: .625rem;
18  font-weight: bold;
19  color: #858585;
20  margin-bottom: 4px;
21  margin-left: 1px;
22}
23
24.input-helper {
25  color: #858585;
26  font-size: .5rem;
27  margin-top: 6px;
28  margin-left: 1px;
29  visibility: hidden;
30  transform: translateY(-.5rem);
31  transition: all 100ms linear;
32  z-index: -1;
33}
34
35.input::placeholder {
36  color: rgb(145, 145, 145);
37  font-size: .75rem;
38}
39
40.input::after {
41  content: attr(placeholder);
42  position: absolute;
43  color: #161616;
44  top: 0;
45  left: 0;
46}
47
48.input:focus {
49  border: none;
50  box-shadow: 0px 1.5px 0px 0px #72E985;
51  outline: none;
52}
53
54.input:focus + .input-helper {
55  visibility: visible;
56  transform: translateY(0rem);
57}
58
59.input:focus::placeholder {
60  visibility: hidden;
61}