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