1.input {
2  color: black;
3  font: 1em/1.5 Hind, sans-serif;
4}
5
6form, .input, .caret {
7  margin: auto;
8}
9
10form {
11  position: relative;
12  width: 100%;
13  max-width: 17em;
14}
15
16.input, .caret {
17  display: block;
18  transition: all calc(1s * 0.5) linear;
19}
20
21.input {
22  background: transparent;
23  border-radius: 50%;
24  box-shadow: 0 0 0 0.25em inset;
25  caret-color: #255ff4;
26  width: 2em;
27  height: 2em;
28  -webkit-appearance: none;
29  -moz-appearance: none;
30  appearance: none;
31}
32
33.input:focus, .input:valid {
34  background: powderblue;
35  border-radius: 0.25em;
36  box-shadow: none;
37  padding: 0.75em 1em;
38  transition-duration: calc(1s * 0.25);
39  transition-delay: calc(1s * 0.25);
40  width: 100%;
41  height: 3em;
42}
43
44.input:focus {
45  animation: showCaret 1s steps(1);
46  outline: transparent;
47}
48
49.input:focus + .caret, .input:valid + .caret {
50  animation: handleToCaret 1s linear;
51  background: transparent;
52  width: 1px;
53  height: 1.5em;
54  transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
55}
56
57.input::-webkit-search-decoration {
58  -webkit-appearance: none;
59}
60
61label {
62  color: #e3e4e8;
63  overflow: hidden;
64  position: absolute;
65  width: 0;
66  height: 0;
67}
68
69.caret {
70  background: black;
71  border-radius: 0 0 0.125em 0.125em;
72  margin-bottom: -0.6em;
73  width: 0.25em;
74  height: 1em;
75  transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
76  transform-origin: 50% 0;
77}
78
79/* Animations */
80@keyframes showCaret {
81  from {
82    caret-color: transparent;
83  }
84
85  to {
86    caret-color: #255ff4;
87  }
88}
89
90@keyframes handleToCaret {
91  from {
92    background: currentColor;
93    width: 0.25em;
94    height: 1em;
95    transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
96  }
97
98  25% {
99    background: currentColor;
100    width: 0.25em;
101    height: 1em;
102    transform: translate(0,-1em) rotate(-180deg) translate(0,0.875em);
103  }
104
105  50%, 62.5% {
106    background: #255ff4;
107    width: 1px;
108    height: 1.5em;
109    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,2.5em);
110  }
111
112  75%, 99% {
113    background: #255ff4;
114    width: 1px;
115    height: 1.5em;
116    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
117  }
118
119  87.5% {
120    background: #255ff4;
121    width: 1px;
122    height: 1.5em;
123    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,0.125em);
124  }
125
126  to {
127    background: transparent;
128    width: 1px;
129    height: 1.5em;
130    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
131  }
132}