Input by WhiteNervosa

1.textInputWrapper {
2  position: relative;
3  width: 180px;
4  margin: 12px 5px;
5  --accent-color: #a3e583;
6}
7
8.textInputWrapper:before {
9  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
10  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
11}
12
13.textInputWrapper:before,
14.textInputWrapper:after {
15  content: "";
16  left: 0;
17  right: 0;
18  position: absolute;
19  pointer-events: none;
20  bottom: -1px;
21  z-index: 4;
22  width: 100%;
23}
24
25.textInputWrapper:focus-within:before {
26  border-bottom: 1px solid var(--accent-color);
27}
28
29.textInputWrapper:before {
30  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
31  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
32}
33
34.textInputWrapper:focus-within:before {
35  border-bottom: 1px solid var(--accent-color);
36  transform: scaleX(1);
37}
38
39.textInputWrapper:focus-within:after {
40  border-bottom: 2px solid var(--accent-color);
41  transform: scaleX(1);
42}
43
44.textInputWrapper:after {
45  content: "";
46  transform: scaleX(0);
47  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
48  will-change: transform;
49  border-bottom: 2px solid var(--accent-color);
50  border-bottom-color: var(--accent-color);
51}
52
53.textInput::placeholder {
54  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
55  opacity: 1;
56  user-select: none;
57  color: rgba(255, 255, 255, 0.582);
58}
59
60.textInputWrapper .textInput {
61  border-radius: 5px 5px 0px 0px;
62  box-shadow: 0px 2px 5px rgb(35 35 35 / 30%);
63  max-height: 36px;
64  background-color: #252525;
65  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
66  transition-duration: 200ms;
67  transition-property: background-color;
68  color: #e8e8e8;
69  font-size: 14px;
70  font-weight: 500;
71  padding: 12px;
72  width: 100%;
73  border-left: none;
74  border-bottom: none;
75  border-right: none;
76}
77
78.textInputWrapper .textInput:focus,
79.textInputWrapper .textInput:active {
80  outline: none;
81}
82
83.textInputWrapper:focus-within .textInput,
84.textInputWrapper .textInput:focus,
85.textInputWrapper .textInput:active {
86  background-color: #353535;
87}
88
89.textInputWrapper:focus-within .textInput::placeholder {
90  opacity: 0;
91}
92