#e8e8e8
1.group { 2 position: relative; 3} 4 5.input { 6 font-size: 16px; 7 padding: 10px 10px 10px 5px; 8 display: block; 9 width: 200px; 10 border: none; 11 border-bottom: 1px solid #515151; 12 background: transparent; 13} 14 15.input:focus { 16 outline: none; 17} 18 19label { 20 color: #999; 21 font-size: 18px; 22 font-weight: normal; 23 position: absolute; 24 pointer-events: none; 25 left: 5px; 26 top: 10px; 27 transition: 0.2s ease all; 28 -moz-transition: 0.2s ease all; 29 -webkit-transition: 0.2s ease all; 30} 31 32.input:focus ~ label, .input:valid ~ label { 33 top: -20px; 34 font-size: 14px; 35 color: #5264AE; 36} 37 38.bar { 39 position: relative; 40 display: block; 41 width: 200px; 42} 43 44.bar:before, .bar:after { 45 content: ''; 46 height: 2px; 47 width: 0; 48 bottom: 1px; 49 position: absolute; 50 background: #5264AE; 51 transition: 0.2s ease all; 52 -moz-transition: 0.2s ease all; 53 -webkit-transition: 0.2s ease all; 54} 55 56.bar:before { 57 left: 50%; 58} 59 60.bar:after { 61 right: 50%; 62} 63 64.input:focus ~ .bar:before, .input:focus ~ .bar:after { 65 width: 50%; 66} 67 68.highlight { 69 position: absolute; 70 height: 60%; 71 width: 100px; 72 top: 25%; 73 left: 0; 74 pointer-events: none; 75 opacity: 0.5; 76} 77 78.input:focus ~ .highlight { 79 animation: inputHighlighter 0.3s ease; 80} 81 82@keyframes inputHighlighter { 83 from { 84 background: #5264AE; 85 } 86 87 to { 88 width: 0; 89 background: transparent; 90 } 91}
Comments
MIT License