#e8e8e8
1.input-container { 2 position: relative; 3 margin: 50px auto; 4 width: 200px; 5} 6 7.input-container input[type="text"] { 8 font-size: 20px; 9 width: 100%; 10 border: none; 11 border-bottom: 2px solid #ccc; 12 padding: 5px 0; 13 background-color: transparent; 14 outline: none; 15} 16 17.input-container .label { 18 position: absolute; 19 top: 0; 20 left: 0; 21 color: #ccc; 22 transition: all 0.3s ease; 23 pointer-events: none; 24} 25 26.input-container input[type="text"]:focus ~ .label, 27.input-container input[type="text"]:valid ~ .label { 28 top: -20px; 29 font-size: 16px; 30 color: #333; 31} 32 33.input-container .underline { 34 position: absolute; 35 bottom: 0; 36 left: 0; 37 height: 2px; 38 width: 100%; 39 background-color: #333; 40 transform: scaleX(0); 41 transition: all 0.3s ease; 42} 43 44.input-container input[type="text"]:focus ~ .underline, 45.input-container input[type="text"]:valid ~ .underline { 46 transform: scaleX(1); 47} 48
Comments
MIT License