#e8e8e8
1/* Input container */ 2.input-container { 3 position: relative; 4 margin: 20px; 5} 6 7/* Input field */ 8.input-field { 9 display: block; 10 width: 100%; 11 padding: 10px; 12 font-size: 16px; 13 border: none; 14 border-bottom: 2px solid #ccc; 15 outline: none; 16 background-color: transparent; 17} 18 19/* Input label */ 20.input-label { 21 position: absolute; 22 top: 0; 23 left: 0; 24 font-size: 16px; 25 color: rgba(204, 204, 204, 0); 26 pointer-events: none; 27 transition: all 0.3s ease; 28} 29 30/* Input highlight */ 31.input-highlight { 32 position: absolute; 33 bottom: 0; 34 left: 0; 35 height: 2px; 36 width: 0; 37 background-color: #007bff; 38 transition: all 0.3s ease; 39} 40 41/* Input field:focus styles */ 42.input-field:focus + .input-label { 43 top: -20px; 44 font-size: 12px; 45 color: #007bff; 46} 47 48.input-field:focus + .input-label + .input-highlight { 49 width: 100%; 50} 51
Comments
MIT License