1.input-container {
2  --c-text: rgb(50, 50, 80);
3  --c-bg: rgb(252, 252, 252);
4  --c-outline: rgb(55, 45 , 190);
5  display: grid;
6  gap: 1ch;
7  position: relative;
8  max-width: 190px;
9  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10}
11
12.input-field {
13  padding: 0.5em 0.75em;
14  border-radius: 0.2em;
15  border: 1px solid var(--c-border, currentColor);
16  color: var(--c-text);
17  font-size: 1rem;
18  letter-spacing: 0.1ch;
19  width: 100%;
20}
21
22.input-field:not(:placeholder-shown) + .input-label {
23  transform: translateY(-220%);
24  opacity: 1;
25}
26
27.input-field:invalid {
28  --c-border: rgb(230, 85, 60);
29  --c-text: rgb(230, 85, 60);
30  --c-outline: rgb(230, 85, 60);
31}
32
33.input-field:is(:disabled, :read-only) {
34  --c-border: rgb(150, 150, 150);
35  --c-text: rgb(170, 170, 170);
36}
37
38.input-field:is(:focus, :focus-visible) {
39  outline: 2px solid var(--c-outline);
40  outline-offset: 2px;
41}
42
43.input-label {
44  --timing: 200ms ease-in;
45  position: absolute;
46  left: 0;
47  top: 50%;
48  transition: transform var(--timing),
49    opacity var(--timing);
50  transform: translateY(-50%);
51  opacity: 0;
52  color: var(--c-text);
53  font-weight: 500;
54}
55
56@media (prefers-reduced-motion: reduce) {
57  .input-label {
58    --timing: linear;
59  }
60}
61
62@media (prefers-color-scheme: dark) {
63  .input-container {
64    --c-text: rgb(252, 252, 252);
65    --c-bg: transparent;
66  }
67}