Input by Harsha2lucky
#e8e8e8
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}
4.1K views
4.1K views
MIT License